<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  

  
  <title>诶无痕和诶有痕</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta property="og:type" content="website">
<meta property="og:title" content="诶无痕和诶有痕">
<meta property="og:url" content="http://example.com/index.html">
<meta property="og:site_name" content="诶无痕和诶有痕">
<meta property="og:locale" content="zh_CH">
<meta property="article:author" content="诶无痕和诶有痕">
<meta name="twitter:card" content="summary">
  
    <link rel="alternate" href="/atom.xml" title="诶无痕和诶有痕" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  
<link rel="stylesheet" href="/css/style.css">

<meta name="generator" content="Hexo 5.4.1"></head>

<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">诶无痕和诶有痕</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://example.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main">
  
    <article id="post-vuex学习" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2022/03/23/vuex%E5%AD%A6%E4%B9%A0/" class="article-date">
  <time datetime="2022-03-23T08:48:00.000Z" itemprop="datePublished">2022-03-23</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2022/03/23/vuex%E5%AD%A6%E4%B9%A0/">vuex学习</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h1 id="vuex介绍"><a href="#vuex介绍" class="headerlink" title="vuex介绍"></a>vuex介绍</h1><p>● state，驱动应用的数据源；相当于组件中的data<br>● view，以声明方式将 state 映射到视图；相当于组件中的template<br>● actions，响应在 view 上的用户输入导致的状态变化。相当于组件中的methods<br><img src="/images/19.png" alt="img"></p>
<h1 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h1><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">vue add vuex</span><br><span class="line">通过这种方式安装会自动配置相关信息</span><br><span class="line">npm install vuex --save</span><br><span class="line">通过这种方式安装，要自己配置vuex的相关信息</span><br></pre></td></tr></table></figure>
<h1 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h1><ol>
<li>Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。</li>
<li>你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。<h2 id="通过npm-install-vuex-–save安装："><a href="#通过npm-install-vuex-–save安装：" class="headerlink" title="通过npm install vuex –save安装："></a>通过npm install vuex –save安装：</h2>先main.js文件中导入并注册store<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">import Vue from &#x27;vue&#x27;</span><br><span class="line">import App from &#x27;./App.vue&#x27;</span><br><span class="line">import store from &#x27;./store&#x27;</span><br><span class="line"></span><br><span class="line">Vue.config.productionTip = false</span><br><span class="line"></span><br><span class="line">new Vue(&#123;</span><br><span class="line">  // 为了在 Vue 组件中访问 this.$store property,你需要为 Vue 实例提供创建好的 store</span><br><span class="line">  store,</span><br><span class="line">  render: h =&gt; h(App)</span><br><span class="line">&#125;).$mount(&#x27;#app&#x27;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
在创建一个.js文件实例化一个Store，并导出他<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br></pre></td><td class="code"><pre><span class="line">import Vue from &#x27;vue&#x27;</span><br><span class="line">import Vuex from &#x27;vuex&#x27;</span><br><span class="line"></span><br><span class="line">// 通过vue.use注册Vuex</span><br><span class="line">Vue.use(Vuex)</span><br><span class="line"></span><br><span class="line">// 实例化一个store对象</span><br><span class="line">export default new Vuex.Store(&#123;</span><br><span class="line">  // state类似于组件中的data，用来存放对象</span><br><span class="line">  // state中的对象只能通过mutations中的函数修改</span><br><span class="line">  state: &#123;</span><br><span class="line">    count:0</span><br><span class="line">  &#125;,</span><br><span class="line">  // getters类似于组件中的computed对象，用来处理数据</span><br><span class="line">  getters: &#123;</span><br><span class="line">  &#125;,</span><br><span class="line">  // mutations和actions类似于组件中的methods对象</span><br><span class="line">  // mutations中必须使用同步函数，mutations中的函数用于修改state中的对象</span><br><span class="line">  mutations: &#123;</span><br><span class="line">    increment (state) &#123;</span><br><span class="line">      state.count++</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  //  actions中的函数可以返回一个Promise，这也说明actions中可以使用异步函数的。</span><br><span class="line">  // actions中的函数不能直接修改state，需要调用mutations中的函数来修改。</span><br><span class="line">  // 通过commit调用mutations中的函数</span><br><span class="line">  actions: &#123;</span><br><span class="line">  &#125;,</span><br><span class="line">  // 模块对象。每个模块相当于一个Store的实例化对象</span><br><span class="line">  modules: &#123;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h2 id="获取数据，修改数据"><a href="#获取数据，修改数据" class="headerlink" title="获取数据，修改数据"></a>获取数据，修改数据</h2>获取数据<br>在组建方法中：this.$store.state.xxx<br>在标签中：$store.state.xxx或this.$store.state.xxx<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br><span class="line">315</span><br><span class="line">316</span><br><span class="line">317</span><br><span class="line">318</span><br><span class="line">319</span><br><span class="line">320</span><br><span class="line">321</span><br><span class="line">322</span><br><span class="line">323</span><br><span class="line">324</span><br><span class="line">325</span><br><span class="line">326</span><br><span class="line">327</span><br><span class="line">328</span><br><span class="line">329</span><br><span class="line">330</span><br><span class="line">331</span><br><span class="line">332</span><br><span class="line">333</span><br><span class="line">334</span><br><span class="line">335</span><br><span class="line">336</span><br><span class="line">337</span><br><span class="line">338</span><br><span class="line">339</span><br><span class="line">340</span><br><span class="line">341</span><br><span class="line">342</span><br><span class="line">343</span><br><span class="line">344</span><br><span class="line">345</span><br><span class="line">346</span><br><span class="line">347</span><br><span class="line">348</span><br><span class="line">349</span><br><span class="line">350</span><br><span class="line">351</span><br><span class="line">352</span><br><span class="line">353</span><br><span class="line">354</span><br><span class="line">355</span><br><span class="line">356</span><br><span class="line">357</span><br><span class="line">358</span><br></pre></td><td class="code"><pre><span class="line">vuex介绍</span><br><span class="line">● state，驱动应用的数据源；相当于组件中的data</span><br><span class="line">● view，以声明方式将 state 映射到视图；相当于组件中的template</span><br><span class="line">● actions，响应在 view 上的用户输入导致的状态变化。相当于组件中的methods</span><br><span class="line"></span><br><span class="line">安装</span><br><span class="line">vue add vuex</span><br><span class="line">通过这种方式安装会自动配置相关信息</span><br><span class="line">npm install vuex --save</span><br><span class="line">通过这种方式安装，要自己配置vuex的相关信息</span><br><span class="line">使用</span><br><span class="line">1. Vuex 的状态存储是响应式的。当 Vue 组件从 store 中读取状态的时候，若 store 中的状态发生变化，那么相应的组件也会相应地得到高效更新。</span><br><span class="line">2. 你不能直接改变 store 中的状态。改变 store 中的状态的唯一途径就是显式地提交 (commit) mutation。这样使得我们可以方便地跟踪每一个状态的变化，从而让我们能够实现一些工具帮助我们更好地了解我们的应用。</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">通过npm install vuex --save安装：</span><br><span class="line">先main.js文件中导入并注册store</span><br><span class="line">import Vue from &#x27;vue&#x27;</span><br><span class="line">import App from &#x27;./App.vue&#x27;</span><br><span class="line">import store from &#x27;./store&#x27;</span><br><span class="line"></span><br><span class="line">Vue.config.productionTip = false</span><br><span class="line"></span><br><span class="line">new Vue(&#123;</span><br><span class="line">  // 为了在 Vue 组件中访问 this.$store property,你需要为 Vue 实例提供创建好的 store</span><br><span class="line">  store,</span><br><span class="line">  render: h =&gt; h(App)</span><br><span class="line">&#125;).$mount(&#x27;#app&#x27;)</span><br><span class="line"></span><br><span class="line">在创建一个.js文件实例化一个Store，并导出他</span><br><span class="line">import Vue from &#x27;vue&#x27;</span><br><span class="line">import Vuex from &#x27;vuex&#x27;</span><br><span class="line"></span><br><span class="line">// 通过vue.use注册Vuex</span><br><span class="line">Vue.use(Vuex)</span><br><span class="line"></span><br><span class="line">// 实例化一个store对象</span><br><span class="line">export default new Vuex.Store(&#123;</span><br><span class="line">  // state类似于组件中的data，用来存放对象</span><br><span class="line">  // state中的对象只能通过mutations中的函数修改</span><br><span class="line">  state: &#123;</span><br><span class="line">    count:0</span><br><span class="line">  &#125;,</span><br><span class="line">  // getters类似于组件中的computed对象，用来处理数据</span><br><span class="line">  getters: &#123;</span><br><span class="line">  &#125;,</span><br><span class="line">  // mutations和actions类似于组件中的methods对象</span><br><span class="line">  // mutations中必须使用同步函数，mutations中的函数用于修改state中的对象</span><br><span class="line">  mutations: &#123;</span><br><span class="line">    increment (state) &#123;</span><br><span class="line">      state.count++</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  //  actions中的函数可以返回一个Promise，这也说明actions中可以使用异步函数的。</span><br><span class="line">  // actions中的函数不能直接修改state，需要调用mutations中的函数来修改。</span><br><span class="line">  // 通过commit调用mutations中的函数</span><br><span class="line">  actions: &#123;</span><br><span class="line">  &#125;,</span><br><span class="line">  // 模块对象。每个模块相当于一个Store的实例化对象</span><br><span class="line">  modules: &#123;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">获取数据，修改数据</span><br><span class="line">获取数据</span><br><span class="line">在组建方法中：this.$store.state.xxx</span><br><span class="line">在标签中：$store.state.xxx或this.$store.state.xxx</span><br><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    //获取数据时可以加this，也可以不加，通过$store.state.xxx获取store中的数据</span><br><span class="line">    &lt;div&gt;&#123;&#123;this.$store.state.count&#125;&#125;&lt;/div&gt;</span><br><span class="line">    &lt;div&gt;&#123;&#123;$store.state.count&#125;&#125;&lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  mounted()&#123;</span><br><span class="line">    // 通过this.$store.commit的形式调用mutations中的increment函数修改state中的count对象</span><br><span class="line">    this.$store.commit(&#x27;increment&#x27;)</span><br><span class="line">    // 打印修改后的数据</span><br><span class="line">    console.log(this.$store.state.count)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line">State</span><br><span class="line">Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT(opens new window))”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。</span><br><span class="line">存储在 Vuex 中的数据和 Vue 实例中的 data 遵循相同的规则</span><br><span class="line">在组件中获取vuex的state</span><br><span class="line">export default &#123;</span><br><span class="line">  mounted()&#123;</span><br><span class="line">    // 通过this.$store.commit的形式调用mutations中的increment函数修改state中的count对象</span><br><span class="line">    this.$store.commit(&#x27;increment&#x27;)</span><br><span class="line">    // 打印修改后的数据</span><br><span class="line">    console.log(this.$store.state.count)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">mapState辅助函数</span><br><span class="line">通过辅助函数一次获取多个state中的对象</span><br><span class="line">传入一个对象作为mapState参数</span><br><span class="line">// mapState时state的辅助函数</span><br><span class="line">  // 传入一个对象</span><br><span class="line">  computed:mapState(&#123;</span><br><span class="line">    // 这里可以使用箭头函数，通过函数将state中的对象返回给count</span><br><span class="line">    // 这样就可以在组件中通过count来显示state中的count对象的内容了</span><br><span class="line">    // 因为时响应式的所以数据会实时更新</span><br><span class="line">    count: function(state) &#123;return state.count&#125;,</span><br><span class="line"></span><br><span class="line">    // 通过别名方式获取state中的对象</span><br><span class="line">    // 这里的&#x27;count&#x27; 等同于 `state =&gt; state.count`</span><br><span class="line">    Acount:&#x27;count&#x27;,</span><br><span class="line"></span><br><span class="line">    // 为了能够使用 `this` 获取局部状态，必须使用常规函数</span><br><span class="line">    getLocalData(state)&#123;</span><br><span class="line">      return state.count + this.a</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;),</span><br><span class="line">传入一个数组作为mapState参数</span><br><span class="line">// 当映射的计算属性的名称与 state 的子节点名称相同时，可以给 mapState 传一个字符串数组</span><br><span class="line">  computed:mapState([</span><br><span class="line">    // 映射 this.count 为 store.state.count</span><br><span class="line">    &#x27;count&#x27;</span><br><span class="line">  ]),</span><br><span class="line">对象展开符</span><br><span class="line">computed:&#123;</span><br><span class="line">    // 通过对象展开符将mapState返回的对象展开</span><br><span class="line">    ...mapState(&#123;</span><br><span class="line">        count: function(state) &#123;return state.count&#125;,</span><br><span class="line">        Acount:&#x27;count&#x27;,</span><br><span class="line">        getLocalData(state)&#123;</span><br><span class="line">          return state.count + this.a</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;,</span><br><span class="line">getters</span><br><span class="line">// 处理数据，和组件中的computed类似</span><br><span class="line">// 通过getters将数据处理并保存，在组件中通过this.$store.getters.xxx获取对应的处理结果</span><br><span class="line">// this.$store.getters.newName --&gt; undefined123123(undefined是因为没有name)</span><br><span class="line">getters:&#123;</span><br><span class="line">  //第二个参数是一个getters</span><br><span class="line">  newName(state,get)&#123;</span><br><span class="line">    // 可以调用另一个getters</span><br><span class="line">    // get 代表getters</span><br><span class="line">    return state.name+ &quot;123&quot; + get.newName2;</span><br><span class="line">  &#125;,</span><br><span class="line">  newName2(state) &#123;</span><br><span class="line">    return &quot;123&quot;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">获取getters中的数据</span><br><span class="line">mounted()&#123;</span><br><span class="line">    console.log(this.$store.getters.newName)</span><br><span class="line">  &#125;</span><br><span class="line">通过方法访问</span><br><span class="line">你也可以通过让 getter 返回一个函数，来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用。</span><br><span class="line">getters: &#123;</span><br><span class="line">  getTodoById: function(state) &#123;</span><br><span class="line">    return (id) =&gt;&#123;</span><br><span class="line">      // todos是一个数组</span><br><span class="line">      return 	state.todos.find(todo =&gt; todo.id === id)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">使用</span><br><span class="line">mounted()&#123;</span><br><span class="line">    this.$store.getters.getTodoById(2)</span><br><span class="line">&#125;</span><br><span class="line">mapGetters辅助函数</span><br><span class="line">使用方法和mapState类似</span><br><span class="line">computed:&#123;</span><br><span class="line">  // 起别名</span><br><span class="line">  //   ...mapGetters(&#123;</span><br><span class="line">  //   someohter:&#x27;newName&#x27;,</span><br><span class="line">  // &#125;)</span><br><span class="line">  </span><br><span class="line">  //直接映射</span><br><span class="line">  ...mapGetters([</span><br><span class="line">    &#x27;newName&#x27;</span><br><span class="line">  ])</span><br><span class="line">&#125;,</span><br><span class="line">mutations</span><br><span class="line">Mutation 必须是同步函数</span><br><span class="line">接收参数</span><br><span class="line">mutations: &#123;</span><br><span class="line">    // 在大多数情况下，载荷应该是一个对象，</span><br><span class="line">    increment (state,payload) &#123;</span><br><span class="line">      state.count++;</span><br><span class="line">      console.log(payload);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">传入参数</span><br><span class="line">参数2可以是一个对像，也可以是多个参数</span><br><span class="line">mounted()&#123;</span><br><span class="line">    this.$store.commit(&#x27;increment&#x27;,&#123;&quot;a&quot;:12,&quot;b&quot;:21&#125;)</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">对象风格的提交方式</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">mounted()&#123;</span><br><span class="line">    this.$store.commit(&#123;</span><br><span class="line">      // type属性对应mutations中的方法</span><br><span class="line">      type:&#x27;increment&#x27;,</span><br><span class="line">      //剩下的属性都是参数，全部会被放到payload对象中</span><br><span class="line">      amount: 10,</span><br><span class="line">      account:&quot;hao123&quot;</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br><span class="line">Mutation 需遵守 Vue 的响应规则</span><br><span class="line">既然 Vuex 的 store 中的状态是响应式的，那么当我们变更状态时，监视状态的 Vue 组件也会自动更新。这也意味着 Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项：</span><br><span class="line">1. 最好提前在你的 store 中初始化好所有所需属性。</span><br><span class="line">2. 当需要在对象上添加新属性时，你应该</span><br><span class="line">● 使用 Vue.set(obj, &#x27;newProp&#x27;, 123), 或者</span><br><span class="line">● 以新对象替换老对象。例如，利用对象展开运算符(opens new window)我们可以这样写：</span><br><span class="line">state.obj = &#123; ...state.obj, newProp: 123 &#125;</span><br><span class="line">使用常量替代 Mutation 事件类型</span><br><span class="line">export const SOME_MUTATION = &#x27;SOME_MUTATION&#x27;;</span><br><span class="line">export const mutations= &#123;</span><br><span class="line">  // 在大多数情况下，载荷应该是一个对象，</span><br><span class="line">  increment (state,payload) &#123;</span><br><span class="line">    state.count++;</span><br><span class="line">    console.log(payload);</span><br><span class="line">    console.log(state)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">在store的js文件中导入</span><br><span class="line"></span><br><span class="line">在组件中提交 Mutation</span><br><span class="line">mapMutations 辅助函数</span><br><span class="line">methods:&#123;</span><br><span class="line">    ...mapMutations([</span><br><span class="line">      &#x27;increment&#x27;// 将 `this.increment()` 映射为 `this.$store.commit(&#x27;increment&#x27;)`</span><br><span class="line">    ]),</span><br><span class="line">    ...mapMutations(&#123;</span><br><span class="line">      // 别名</span><br><span class="line">      add: &#x27;increment&#x27; // 将 `this.add()` 映射为 `this.$store.commit(&#x27;increment&#x27;)`</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">使用</span><br><span class="line">mounted()&#123;</span><br><span class="line">    this.increment();</span><br><span class="line">    this.add()</span><br><span class="line">&#125;</span><br><span class="line">action</span><br><span class="line">可以在 action 内部执行异步操作</span><br><span class="line"></span><br><span class="line">使用</span><br><span class="line">Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。</span><br><span class="line">actions: &#123;</span><br><span class="line">    // 这里的context相当于是store </span><br><span class="line">    increment (context) &#123;</span><br><span class="line">      //commit中的increment是mutations中的函数</span><br><span class="line">      context.commit(&#x27;increment&#x27;)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">实践中，我们会经常用到 ES2015 的 参数解构(opens new window)来简化代码（特别是我们需要调用 commit 很多次的时候）：</span><br><span class="line">actions: &#123;</span><br><span class="line">  // 通过解构获取到commit对象--》const &#123;commit&#125; = store</span><br><span class="line">  increment (&#123; commit &#125;) &#123;</span><br><span class="line">    commit(&#x27;increment&#x27;)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">触发action</span><br><span class="line">mounted()&#123;</span><br><span class="line">    // 触发action中的方法</span><br><span class="line">    this.$store.dispatch(&#x27;increment&#x27;)</span><br><span class="line">  &#125;</span><br><span class="line">Actions 支持同样的载荷方式和对象方式进行分发</span><br><span class="line"></span><br><span class="line">mounted()&#123;</span><br><span class="line">  // 以载荷形式分发</span><br><span class="line">    this.$store.dispatch(&#x27;increment&#x27;,&#123;&quot;a&quot;:123,&quot;b&quot;:456&#125;)</span><br><span class="line">  </span><br><span class="line">  // 以对象形式分发</span><br><span class="line">  this.$store.dispatch(&#123;</span><br><span class="line">    type: &#x27;increment&#x27;,</span><br><span class="line">    &quot;a&quot;:123,</span><br><span class="line">    &quot;b&quot;:456</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">接收方式也是一样的</span><br><span class="line">actions: &#123;</span><br><span class="line">    increment (context,payload) &#123;</span><br><span class="line">      context.commit(&#x27;increment&#x27;,payload)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">在组件中分发 Action</span><br><span class="line">mapActions 辅助函数</span><br><span class="line">methods:&#123;</span><br><span class="line">    ...mapActions ([</span><br><span class="line">      &#x27;increment&#x27;,</span><br><span class="line">    ]),</span><br><span class="line">    ...mapActions (&#123;</span><br><span class="line">      add:&#x27;increment&#x27;,</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;,</span><br><span class="line">store.dispatch</span><br><span class="line">store.dispatch返回一个Promise</span><br><span class="line">action中的函数也可以返回一个Promise</span><br><span class="line">actions: &#123;</span><br><span class="line">  actionA (&#123; commit &#125;) &#123;</span><br><span class="line">    return new Promise((resolve, reject) =&gt; &#123;</span><br><span class="line">      setTimeout(() =&gt; &#123;</span><br><span class="line">        commit(&#x27;someMutation&#x27;)</span><br><span class="line">        resolve()</span><br><span class="line">      &#125;, 1000)</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">store.dispatch(&#x27;actionA&#x27;)返回一个Promise</span><br><span class="line">actions中的函数亦可以使用dispatch触发另一个action</span><br><span class="line">actions: &#123;</span><br><span class="line">  // ...</span><br><span class="line">  actionB (&#123; dispatch, commit &#125;) &#123;</span><br><span class="line">    return dispatch(&#x27;actionA&#x27;).then(() =&gt; &#123;</span><br><span class="line">      commit(&#x27;someOtherMutation&#x27;)</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">使用async await处理异步函数</span><br><span class="line">actions: &#123;</span><br><span class="line">  async actionA (&#123; commit &#125;) &#123;</span><br><span class="line">    commit(&#x27;gotData&#x27;, await getData())</span><br><span class="line">  &#125;,</span><br><span class="line">  async actionB (&#123; dispatch, commit &#125;) &#123;</span><br><span class="line">    await dispatch(&#x27;actionA&#x27;) // 等待 actionA 完成</span><br><span class="line">    commit(&#x27;gotOtherData&#x27;, await getOtherData())</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">module</span><br><span class="line">由于使用单一状态树，应用的所有状态会集中到一个比较大的对象。当应用变得非常复杂时，store 对象就有可能变得相当臃肿。</span><br><span class="line">为了解决以上问题，Vuex 允许我们将 store 分割成模块（module）。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块——从上至下进行同样方式的分割：</span><br><span class="line">const moduleA = &#123;</span><br><span class="line">  state: () =&gt; (&#123; ... &#125;),</span><br><span class="line">  mutations: &#123; ... &#125;,</span><br><span class="line">  actions: &#123; ... &#125;,</span><br><span class="line">  getters: &#123; ... &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">const moduleB = &#123;</span><br><span class="line">  state: () =&gt; (&#123; ... &#125;),</span><br><span class="line">  mutations: &#123; ... &#125;,</span><br><span class="line">  actions: &#123; ... &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">const store = new Vuex.Store(&#123;</span><br><span class="line">  modules: &#123;</span><br><span class="line">    a: moduleA,</span><br><span class="line">    b: moduleB</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">store.state.a // -&gt; moduleA 的状态</span><br><span class="line">store.state.b // -&gt; moduleB 的状态</span><br></pre></td></tr></table></figure>
<h1 id="State"><a href="#State" class="headerlink" title="State"></a>State</h1>Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT(opens new window))”而存在。这也意味着，每个应用将仅仅包含一个 store 实例。单一状态树让我们能够直接地定位任一特定的状态片段，在调试的过程中也能轻易地取得整个当前应用状态的快照。<br>存储在 Vuex 中的数据和 Vue 实例中的 data 遵循相同的规则<h2 id="在组件中获取vuex的state"><a href="#在组件中获取vuex的state" class="headerlink" title="在组件中获取vuex的state"></a>在组件中获取vuex的state</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">export default &#123;</span><br><span class="line">  mounted()&#123;</span><br><span class="line">    // 通过this.$store.commit的形式调用mutations中的increment函数修改state中的count对象</span><br><span class="line">    this.$store.commit(&#x27;increment&#x27;)</span><br><span class="line">    // 打印修改后的数据</span><br><span class="line">    console.log(this.$store.state.count)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="mapState辅助函数"><a href="#mapState辅助函数" class="headerlink" title="mapState辅助函数"></a>mapState辅助函数</h2>通过辅助函数一次获取多个state中的对象<h3 id="传入一个对象作为mapState参数"><a href="#传入一个对象作为mapState参数" class="headerlink" title="传入一个对象作为mapState参数"></a>传入一个对象作为mapState参数</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><span class="line">// mapState时state的辅助函数</span><br><span class="line">  // 传入一个对象</span><br><span class="line">  computed:mapState(&#123;</span><br><span class="line">    // 这里可以使用箭头函数，通过函数将state中的对象返回给count</span><br><span class="line">    // 这样就可以在组件中通过count来显示state中的count对象的内容了</span><br><span class="line">    // 因为时响应式的所以数据会实时更新</span><br><span class="line">    count: function(state) &#123;return state.count&#125;,</span><br><span class="line"></span><br><span class="line">    // 通过别名方式获取state中的对象</span><br><span class="line">    // 这里的&#x27;count&#x27; 等同于 `state =&gt; state.count`</span><br><span class="line">    Acount:&#x27;count&#x27;,</span><br><span class="line"></span><br><span class="line">    // 为了能够使用 `this` 获取局部状态，必须使用常规函数</span><br><span class="line">    getLocalData(state)&#123;</span><br><span class="line">      return state.count + this.a</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;),</span><br></pre></td></tr></table></figure>
<h3 id="传入一个数组作为mapState参数"><a href="#传入一个数组作为mapState参数" class="headerlink" title="传入一个数组作为mapState参数"></a>传入一个数组作为mapState参数</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">// 当映射的计算属性的名称与 state 的子节点名称相同时，可以给 mapState 传一个字符串数组</span><br><span class="line">  computed:mapState([</span><br><span class="line">    // 映射 this.count 为 store.state.count</span><br><span class="line">    &#x27;count&#x27;</span><br><span class="line">  ]),</span><br></pre></td></tr></table></figure>
<h3 id="对象展开符"><a href="#对象展开符" class="headerlink" title="对象展开符"></a>对象展开符</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">computed:&#123;</span><br><span class="line">    // 通过对象展开符将mapState返回的对象展开</span><br><span class="line">    ...mapState(&#123;</span><br><span class="line">        count: state =&gt; state.count,</span><br><span class="line">        Acount:&#x27;count&#x27;,</span><br><span class="line">        getLocalData(state)&#123;</span><br><span class="line">          return state.count + this.a</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;,</span><br></pre></td></tr></table></figure>
<h1 id="getters"><a href="#getters" class="headerlink" title="getters"></a>getters</h1><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">// 处理数据，和组件中的computed类似</span><br><span class="line">// 通过getters将数据处理并保存，在组件中通过this.$store.getters.xxx获取对应的处理结果</span><br><span class="line">// this.$store.getters.newName --&gt; undefined123123(undefined是因为没有name)</span><br><span class="line">getters:&#123;</span><br><span class="line">  //第二个参数是一个getters</span><br><span class="line">  newName(state,get)&#123;</span><br><span class="line">    // 可以调用另一个getters</span><br><span class="line">    // get 代表getters</span><br><span class="line">    return state.name+ &quot;123&quot; + get.newName2;</span><br><span class="line">  &#125;,</span><br><span class="line">  newName2(state) &#123;</span><br><span class="line">    return &quot;123&quot;;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="获取getters中的数据"><a href="#获取getters中的数据" class="headerlink" title="获取getters中的数据"></a>获取getters中的数据</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">mounted()&#123;</span><br><span class="line">    console.log(this.$store.getters.newName)</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
<h2 id="通过方法访问"><a href="#通过方法访问" class="headerlink" title="通过方法访问"></a>通过方法访问</h2>你也可以通过让 getter 返回一个函数，来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用。<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">getters: &#123;</span><br><span class="line">  getTodoById: function(state) &#123;</span><br><span class="line">    return (id) =&gt;&#123;</span><br><span class="line">      // todos是一个数组</span><br><span class="line">      return 	state.todos.find(todo =&gt; todo.id === id)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="使用-1"><a href="#使用-1" class="headerlink" title="使用"></a>使用</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">mounted()&#123;</span><br><span class="line">    this.$store.getters.getTodoById(2)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="mapGetters辅助函数"><a href="#mapGetters辅助函数" class="headerlink" title="mapGetters辅助函数"></a>mapGetters辅助函数</h2>使用方法和mapState类似<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">computed:&#123;</span><br><span class="line">  // 起别名</span><br><span class="line">  //   ...mapGetters(&#123;</span><br><span class="line">  //   someohter:&#x27;newName&#x27;,</span><br><span class="line">  // &#125;)</span><br><span class="line">  </span><br><span class="line">  //直接映射</span><br><span class="line">  ...mapGetters([</span><br><span class="line">    &#x27;newName&#x27;</span><br><span class="line">  ])</span><br><span class="line">&#125;,</span><br></pre></td></tr></table></figure>
<h1 id="mutations"><a href="#mutations" class="headerlink" title="mutations"></a>mutations</h1><h2 id="Mutation-必须是同步函数"><a href="#Mutation-必须是同步函数" class="headerlink" title="Mutation 必须是同步函数"></a>Mutation 必须是同步函数</h2><h2 id="接收参数"><a href="#接收参数" class="headerlink" title="接收参数"></a>接收参数</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">mutations: &#123;</span><br><span class="line">    // 在大多数情况下，载荷应该是一个对象，</span><br><span class="line">    increment (state,payload) &#123;</span><br><span class="line">      state.count++;</span><br><span class="line">      console.log(payload);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br></pre></td></tr></table></figure>
<h2 id="传入参数"><a href="#传入参数" class="headerlink" title="传入参数"></a>传入参数</h2>参数2可以是一个对像，也可以是多个参数<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">mounted()&#123;</span><br><span class="line">    this.$store.commit(&#x27;increment&#x27;,&#123;&quot;a&quot;:12,&quot;b&quot;:21&#125;)</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
<h2 id="对象风格的提交方式"><a href="#对象风格的提交方式" class="headerlink" title="对象风格的提交方式"></a>对象风格的提交方式</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">mounted()&#123;</span><br><span class="line">    this.$store.commit(&#123;</span><br><span class="line">      // type属性对应mutations中的方法</span><br><span class="line">      type:&#x27;increment&#x27;,</span><br><span class="line">      //剩下的属性都是参数，全部会被放到payload对象中</span><br><span class="line">      amount: 10,</span><br><span class="line">      account:&quot;hao123&quot;</span><br><span class="line">    &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="Mutation-需遵守-Vue-的响应规则"><a href="#Mutation-需遵守-Vue-的响应规则" class="headerlink" title="Mutation 需遵守 Vue 的响应规则"></a>Mutation 需遵守 Vue 的响应规则</h2>既然 Vuex 的 store 中的状态是响应式的，那么当我们变更状态时，监视状态的 Vue 组件也会自动更新。这也意味着 Vuex 中的 mutation 也需要与使用 Vue 一样遵守一些注意事项：</li>
<li>最好提前在你的 store 中初始化好所有所需属性。</li>
<li>当需要在对象上添加新属性时，你应该<br>● 使用 Vue.set(obj, ‘newProp’, 123), 或者<br>● 以新对象替换老对象。例如，利用对象展开运算符(opens new window)我们可以这样写：<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">state.obj = &#123; ...state.obj, newProp: 123 &#125;</span><br></pre></td></tr></table></figure>
<h2 id="使用常量替代-Mutation-事件类型"><a href="#使用常量替代-Mutation-事件类型" class="headerlink" title="使用常量替代 Mutation 事件类型"></a>使用常量替代 Mutation 事件类型</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">export const SOME_MUTATION = &#x27;SOME_MUTATION&#x27;;</span><br><span class="line">export const mutations= &#123;</span><br><span class="line">  // 在大多数情况下，载荷应该是一个对象，</span><br><span class="line">  increment (state,payload) &#123;</span><br><span class="line">    state.count++;</span><br><span class="line">    console.log(payload);</span><br><span class="line">    console.log(state)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
在store的js文件中导入</li>
</ol>
<h2 id="在组件中提交-Mutation"><a href="#在组件中提交-Mutation" class="headerlink" title="在组件中提交 Mutation"></a>在组件中提交 Mutation</h2><h3 id="mapMutations-辅助函数"><a href="#mapMutations-辅助函数" class="headerlink" title="mapMutations 辅助函数"></a>mapMutations 辅助函数</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">methods:&#123;</span><br><span class="line">    ...mapMutations([</span><br><span class="line">      &#x27;increment&#x27;// 将 `this.increment()` 映射为 `this.$store.commit(&#x27;increment&#x27;)`</span><br><span class="line">    ]),</span><br><span class="line">    ...mapMutations(&#123;</span><br><span class="line">      // 别名</span><br><span class="line">      add: &#x27;increment&#x27; // 将 `this.add()` 映射为 `this.$store.commit(&#x27;increment&#x27;)`</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
<p>使用</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">mounted()&#123;</span><br><span class="line">    this.increment();</span><br><span class="line">    this.add()</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h1 id="action"><a href="#action" class="headerlink" title="action"></a>action</h1><h2 id="可以在-action-内部执行异步操作"><a href="#可以在-action-内部执行异步操作" class="headerlink" title="可以在 action 内部执行异步操作"></a>可以在 action 内部执行异步操作</h2><h2 id="使用-2"><a href="#使用-2" class="headerlink" title="使用"></a>使用</h2><p>Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation，或者通过 context.state 和 context.getters 来获取 state 和 getters。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">actions: &#123;</span><br><span class="line">    // 这里的context相当于是store </span><br><span class="line">    increment (context) &#123;</span><br><span class="line">      //commit中的increment是mutations中的函数</span><br><span class="line">      context.commit(&#x27;increment&#x27;)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br></pre></td></tr></table></figure>
<p>实践中，我们会经常用到 ES2015 的 参数解构(opens new window)来简化代码（特别是我们需要调用 commit 很多次的时候）：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">actions: &#123;</span><br><span class="line">  // 通过解构获取到commit对象--》const &#123;commit&#125; = store</span><br><span class="line">  increment (&#123; commit &#125;) &#123;</span><br><span class="line">    commit(&#x27;increment&#x27;)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="触发action"><a href="#触发action" class="headerlink" title="触发action"></a>触发action</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">mounted()&#123;</span><br><span class="line">    // 触发action中的方法</span><br><span class="line">    this.$store.dispatch(&#x27;increment&#x27;)</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
<h2 id="Actions-支持同样的载荷方式和对象方式进行分发"><a href="#Actions-支持同样的载荷方式和对象方式进行分发" class="headerlink" title="Actions 支持同样的载荷方式和对象方式进行分发"></a>Actions 支持同样的载荷方式和对象方式进行分发</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">mounted()&#123;</span><br><span class="line">  // 以载荷形式分发</span><br><span class="line">    this.$store.dispatch(&#x27;increment&#x27;,&#123;&quot;a&quot;:123,&quot;b&quot;:456&#125;)</span><br><span class="line">  </span><br><span class="line">  // 以对象形式分发</span><br><span class="line">  this.$store.dispatch(&#123;</span><br><span class="line">    type: &#x27;increment&#x27;,</span><br><span class="line">    &quot;a&quot;:123,</span><br><span class="line">    &quot;b&quot;:456</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>接收方式也是一样的</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">actions: &#123;</span><br><span class="line">    increment (context,payload) &#123;</span><br><span class="line">      context.commit(&#x27;increment&#x27;,payload)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br></pre></td></tr></table></figure>
<h2 id="在组件中分发-Action"><a href="#在组件中分发-Action" class="headerlink" title="在组件中分发 Action"></a>在组件中分发 Action</h2><h3 id="mapActions-辅助函数"><a href="#mapActions-辅助函数" class="headerlink" title="mapActions 辅助函数"></a>mapActions 辅助函数</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">methods:&#123;</span><br><span class="line">    ...mapActions ([</span><br><span class="line">      &#x27;increment&#x27;,</span><br><span class="line">    ]),</span><br><span class="line">    ...mapActions (&#123;</span><br><span class="line">      add:&#x27;increment&#x27;,</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;,</span><br></pre></td></tr></table></figure>
<h2 id="store-dispatch"><a href="#store-dispatch" class="headerlink" title="store.dispatch"></a>store.dispatch</h2><p>store.dispatch返回一个Promise<br>action中的函数也可以返回一个Promise</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">actions: &#123;</span><br><span class="line">  actionA (&#123; commit &#125;) &#123;</span><br><span class="line">    return new Promise((resolve, reject) =&gt; &#123;</span><br><span class="line">      setTimeout(() =&gt; &#123;</span><br><span class="line">        commit(&#x27;someMutation&#x27;)</span><br><span class="line">        resolve()</span><br><span class="line">      &#125;, 1000)</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">store.dispatch(&#x27;actionA&#x27;)返回一个Promise</span><br></pre></td></tr></table></figure>
<p>actions中的函数亦可以使用dispatch触发另一个action</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">actions: &#123;</span><br><span class="line">  // ...</span><br><span class="line">  actionB (&#123; dispatch, commit &#125;) &#123;</span><br><span class="line">    return dispatch(&#x27;actionA&#x27;).then(() =&gt; &#123;</span><br><span class="line">      commit(&#x27;someOtherMutation&#x27;)</span><br><span class="line">    &#125;)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h3 id="使用async-await处理异步函数"><a href="#使用async-await处理异步函数" class="headerlink" title="使用async await处理异步函数"></a>使用async await处理异步函数</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">actions: &#123;</span><br><span class="line">  async actionA (&#123; commit &#125;) &#123;</span><br><span class="line">    commit(&#x27;gotData&#x27;, await getData())</span><br><span class="line">  &#125;,</span><br><span class="line">  async actionB (&#123; dispatch, commit &#125;) &#123;</span><br><span class="line">    await dispatch(&#x27;actionA&#x27;) // 等待 actionA 完成</span><br><span class="line">    commit(&#x27;gotOtherData&#x27;, await getOtherData())</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2022/03/23/vuex%E5%AD%A6%E4%B9%A0/" data-id="cl13n59r00000ygw620qe59wc" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-vuew-router的基本使用" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2022/03/22/vuew-router%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8/" class="article-date">
  <time datetime="2022-03-22T14:03:08.000Z" itemprop="datePublished">2022-03-22</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2022/03/22/vuew-router%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8/">vuew-router的基本使用</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h1 id="路由的重定项"><a href="#路由的重定项" class="headerlink" title="路由的重定项"></a>路由的重定项</h1><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    path: &#x27;/&#x27;,</span><br><span class="line">    name: &#x27;home&#x27;,</span><br><span class="line">    // 重定向到role,role是已经配置了的路由</span><br><span class="line">    redirect:&quot;/role&quot;,</span><br><span class="line">    // 重定向还可以是一个函数</span><br><span class="line">    // redirect:() =&gt; &#123;</span><br><span class="line">    //   return &#123; path: &#x27;/role&#x27;, query: &#123; q: &quot;123&quot; &#125; &#125;</span><br><span class="line">    // &#125;</span><br><span class="line">  &#125;,</span><br></pre></td></tr></table></figure>
<h1 id="别名"><a href="#别名" class="headerlink" title="别名"></a>别名</h1><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    path: &#x27;/&#x27;,</span><br><span class="line">    name: &#x27;home&#x27;,</span><br><span class="line">    // 重定向到role</span><br><span class="line">    redirect:&quot;/role&quot;,</span><br><span class="line">    // 别名  别名可以通过用数组使用多个别名</span><br><span class="line">    // 将 / 别名为 /home，意味着当用户访问 /home 时，URL 仍然是 /home，但会被匹配为用户正在访问 /</span><br><span class="line">    // 想要地址栏变成别名，前面就要使用别名跳转，这样他就显示的时别名(/home)，但实际上时访问的 /</span><br><span class="line">    alias: [&#x27;/home&#x27;,&#x27;/name&#x27;],</span><br><span class="line">  &#125;,</span><br></pre></td></tr></table></figure>
<h1 id="通配路径"><a href="#通配路径" class="headerlink" title="通配路径"></a>通配路径</h1><p>通过正则匹配有相同点的路径</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">// 将匹配所有内容并将其放在 `$route.params.pathMatch` 下</span><br><span class="line">//被匹配到的路径会被存放到pathMatch这个变量中，可以通过$route.params.pathMatch获取</span><br><span class="line">  // &#123; path: &#x27;/:pathMatch(.*)*&#x27;, name: &#x27;NotFound&#x27;, component: NotFound &#125;,</span><br><span class="line">  // 将匹配以 `/user-` 开头的所有内容，并将其放在 `$route.params.afterUser` 下</span><br><span class="line">  // &#123; path: &#x27;/user-:afterUser(.*)&#x27;, component: UserGeneric &#125;,</span><br></pre></td></tr></table></figure>
<h1 id="动态传参"><a href="#动态传参" class="headerlink" title="动态传参"></a>动态传参</h1><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    // 动态传参</span><br><span class="line">    // 传递的参数可以在对应的组件中通过this.$route.params</span><br><span class="line">    // 使用动态传参是路径上必须有对应的数据，</span><br><span class="line">    path: &#x27;/role/:id&#x27;,</span><br><span class="line">    name: &#x27;role&#x27;,</span><br><span class="line">    component:()=&gt; import(/* webpackChunkName: &quot;content&quot; */ &quot;../views/RoleManage.vue&quot;)</span><br><span class="line">  &#125;,</span><br></pre></td></tr></table></figure>
<h2 id="优点"><a href="#优点" class="headerlink" title="优点"></a>优点</h2><p>1.没有硬编码的 URL<br>2.params 的自动编码/解码。<br>3. 防止你在 url 中出现打字错误<br>4. 绕过路径排序（如显示一个）</p>
<h2 id="router-link和this-route-push"><a href="#router-link和this-route-push" class="headerlink" title="router-link和this.$route.push"></a>router-link和this.$route.push</h2><p>链接命名路由 通过to传递一个对象<br><router-link class="router-link" :to="{name:'role',params: { id: 1 }}"></router-link><br>这样通过动态路由传递数据时要通过params了<br>这和router.push({ name: ‘user’, params: { username: ‘erina’ } })是一样的</p>
<h1 id="二级路由"><a href="#二级路由" class="headerlink" title="二级路由"></a>二级路由</h1><p>// 以 / 开头的嵌套路径将被视为根路径。这允许你利用组件嵌套，而不必使用嵌套的 URL<br>// 1.路由配置页面，设置默认路由，然后你想在哪个页面写嵌套路由，就在这个路由中写子路由<br>// 2.子路由跳转及其展示，router-link，帮助我们操作要在router-view中展示的子路由页面</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line">    path: &#x27;/userlist&#x27;,</span><br><span class="line">    name: &#x27;userlist&#x27;,</span><br><span class="line">    component:()=&gt; import(/* webpackChunkName: &quot;content&quot; */ &quot;../views/UserList.vue&quot;),</span><br><span class="line">    // 二级路由要写到对应的路由配置项下面才行</span><br><span class="line">      children:[</span><br><span class="line">      // 当 /userlist/notfound 匹配成功</span><br><span class="line">      // NotFound 将被渲染到 App.vue 的 &lt;router-view&gt; 内部</span><br><span class="line">      // component引入组件</span><br><span class="line">      &#123; path: &#x27;notfound&#x27;, component:NotFound&#125;,</span><br><span class="line">    ]</span><br><span class="line">  &#125;,</span><br></pre></td></tr></table></figure>
<p>对应二级路由的使用</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div&gt;</span><br><span class="line">    用户列表</span><br><span class="line">    // 二级路由要设置一个单独的router-view</span><br><span class="line">    &lt;router-view&gt;&lt;/router-view&gt;</span><br><span class="line">    &lt;!-- 路径要包括二级路由的路径，即一级路由路径/二级路由路径 --&gt;</span><br><span class="line">    &lt;router-link to=&#x27;/userlist/notfound&#x27;&gt;二级路由&lt;/router-link&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure>
<h1 id="声明式导航"><a href="#声明式导航" class="headerlink" title="声明式导航"></a>声明式导航</h1><!-- 点击router-link时内部会调用this.$route.push -->
<!-- 由于属性 to 与 router.push 接受的对象种类相同，所以两者的规则完全相同。 -->
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&quot;left-bar&quot;&gt;</span><br><span class="line">    &lt;ul&gt;</span><br><span class="line">      &lt;li&gt;</span><br><span class="line">        &lt;span class=&quot;main-title&quot;&gt;系统账号管理&lt;/span&gt;</span><br><span class="line">        &lt;ul&gt;</span><br><span class="line">          &lt;li&gt;</span><br><span class="line">            &lt;!-- 声明式导航 --&gt;</span><br><span class="line">            &lt;router-link class=&quot;router-link&quot; to=&quot;/system/系统账号管理/平台账号管理&quot;&gt;平台账号管理&lt;/router-link&gt;</span><br><span class="line">          &lt;/li&gt;</span><br><span class="line">          &lt;li&gt;</span><br><span class="line">            &lt;!-- 在路由表中是动态传参，那么在使用router-link时也要传递参数 --&gt;</span><br><span class="line">            &lt;!-- 点击router-link时内部会调用this.$route.push --&gt;</span><br><span class="line">            &lt;!-- 由于属性 to 与 router.push 接受的对象种类相同，所以两者的规则完全相同。 --&gt;</span><br><span class="line">            &lt;router-link class=&quot;router-link&quot; :to=&quot;&#123;name:&#x27;role&#x27;,params: &#123; id: 1 &#125;&#125;&quot;&gt;角色管理&lt;/router-link&gt;</span><br><span class="line">          &lt;/li&gt;</span><br><span class="line">        &lt;/ul&gt;</span><br><span class="line">      &lt;/li&gt;</span><br><span class="line">    &lt;/ul&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h1 id="页面跳转"><a href="#页面跳转" class="headerlink" title="页面跳转"></a>页面跳转</h1><h2 id="push"><a href="#push" class="headerlink" title="push"></a>push</h2><h3 id="特点"><a href="#特点" class="headerlink" title="特点"></a>特点</h3><p>// 通过push跳转的页面会有历史记录的<br>      // 只有一个路径作为参数时，直接传参，多个参数时使用对象传参<br>      // this.$router.push(‘/users/eduardo’)</p>
<pre><code>        // &lt;!-- router.push 和所有其他导航方法都会返回一个 Promise，
        // 让我们可以等到导航完成后才知道是成功还是失败。 --&gt;
</code></pre>
<h3 id="传参"><a href="#传参" class="headerlink" title="传参"></a>传参</h3><pre><code>   // path与query一起使用，当path存在时params将会被忽略
  // this.$router.push(&#123;path:&#39;/ok&#39;,query:&#123;plan: &#39;private&#39;&#125;&#125;)

  // 通过反引号输入path
  const pat = &#39;/ok&#39;;
  this.$router.push(&#123;path:`$&#123;pat&#125;`,query:&#123;plan: &#39;private&#39;&#125;&#125;)

  // name和params一起使用，通过命名路由跳转页面
  // this.$router.push(&#123; name: &#39;user&#39;, params: &#123; username: &#39;eduardo&#39; &#125; &#125;)

  // 传递的传参数可以是hash
  // this.$router.push(&#123; path: &#39;/about&#39;, hash: &#39;#team&#39; &#125;)
</code></pre>
<h2 id="replace"><a href="#replace" class="headerlink" title="replace"></a>replace</h2><pre><code>  // 通过replace跳转的页面(没有历史记录)
  // 历史记录中（1，2，3）中的3被替换成4--&gt;(1,2,4)
  // this.$router.replace()//作用和this.$router.push一样，（他把当前路径替换成replace中的路径）
  // 在历史记录中，也是将当前记录替换成replace中的
  // this.$router.replace(&#123; path: &#39;/ok&#39; &#125;)
</code></pre>
<h2 id="replace和push"><a href="#replace和push" class="headerlink" title="replace和push"></a>replace和push</h2><pre><code>  // router.push(&#123; path: &#39;/home&#39;, replace: true &#125;)
  // 相当于
  // router.replace(&#123; path: &#39;/home&#39; &#125;)
</code></pre>
<h2 id="go"><a href="#go" class="headerlink" title="go"></a>go</h2><pre><code>  // 通过go横跨页面，（当然也可以使用forworld()向前，back（）向后）
  // this.$router.go(1)
</code></pre>
<h2 id="获取传递的参数"><a href="#获取传递的参数" class="headerlink" title="获取传递的参数"></a>获取传递的参数</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;div&gt;params:&#123;&#123;this.$route.params&#125;&#125;&lt;/div&gt;</span><br><span class="line">&lt;div&gt;query:&#123;&#123;this.$route.query&#125;&#125;&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<h2 id="代码"><a href="#代码" class="headerlink" title="代码"></a>代码</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&quot;left-bar&quot;&gt;</span><br><span class="line">    &lt;ul&gt;</span><br><span class="line">      &lt;li&gt;</span><br><span class="line">        &lt;span class=&quot;main-title&quot;&gt;系统账号管理&lt;/span&gt;</span><br><span class="line">        &lt;ul&gt;</span><br><span class="line">          &lt;li&gt;</span><br><span class="line">            &lt;!-- 声明式导航 --&gt;</span><br><span class="line">            &lt;router-link class=&quot;router-link&quot; to=&quot;/system/系统账号管理/平台账号管理&quot;&gt;平台账号管理&lt;/router-link&gt;</span><br><span class="line">          &lt;/li&gt;</span><br><span class="line">          &lt;li&gt;</span><br><span class="line">            &lt;!-- 在路由表中时动态传参，那么在使用router-link时就要传递参数 --&gt;</span><br><span class="line">            &lt;!-- 点击router-link时内部会调用this.$route.push --&gt;</span><br><span class="line">            &lt;!-- 由于属性 to 与 router.push 接受的对象种类相同，所以两者的规则完全相同。 --&gt;</span><br><span class="line">            &lt;router-link class=&quot;router-link&quot; :to=&quot;&#123;name:&#x27;role&#x27;,params: &#123; id: 1 &#125;&#125;&quot;&gt;角色管理&lt;/router-link&gt;</span><br><span class="line">          &lt;/li&gt;</span><br><span class="line">        &lt;/ul&gt;</span><br><span class="line">      &lt;/li&gt;</span><br><span class="line">      &lt;li&gt;</span><br><span class="line">        &lt;span class=&quot;main-title&quot;&gt;用户管理&lt;/span&gt;</span><br><span class="line">        &lt;ul&gt;</span><br><span class="line">          &lt;li&gt;</span><br><span class="line">            &lt;router-link class=&quot;router-link&quot; to=&quot;/userreg&quot;&gt;用户注册&lt;/router-link&gt;</span><br><span class="line">          &lt;/li&gt;</span><br><span class="line">          &lt;li&gt;</span><br><span class="line">            &lt;router-link class=&quot;router-link&quot; to=&quot;/userlist&quot;&gt;用户列表&lt;/router-link&gt;</span><br><span class="line">          &lt;/li&gt;</span><br><span class="line">          &lt;li&gt;</span><br><span class="line">            &lt;button class=&quot;btn&quot; @click=&quot;toPage&quot;&gt;跳转到404&lt;/button&gt;</span><br><span class="line">          &lt;/li&gt;</span><br><span class="line">        &lt;/ul&gt;</span><br><span class="line">      &lt;/li&gt;</span><br><span class="line">    &lt;/ul&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  methods:&#123;</span><br><span class="line">    toPage:function() &#123;</span><br><span class="line">      // 通过push跳转的页面会有历史记录的</span><br><span class="line">      // 只有一个路径作为参数时，直接传参，多个参数时使用对象传参</span><br><span class="line">      // this.$router.push(&#x27;/users/eduardo&#x27;)</span><br><span class="line">            // &lt;!-- router.push 和所有其他导航方法都会返回一个 Promise，</span><br><span class="line">            // 让我们可以等到导航完成后才知道是成功还是失败。 --&gt;</span><br><span class="line">            // path与query一起使用，当path存在时params将会被忽略</span><br><span class="line">      // this.$router.push(&#123;path:&#x27;/ok&#x27;,query:&#123;plan: &#x27;private&#x27;&#125;&#125;)</span><br><span class="line">      // 通过反引号输入path</span><br><span class="line">      const pat = &#x27;/ok&#x27;;</span><br><span class="line">      this.$router.push(&#123;path:`$&#123;pat&#125;`,query:&#123;plan: &#x27;private&#x27;&#125;&#125;)</span><br><span class="line"></span><br><span class="line">      // name和params一起使用，通过命名路由跳转页面</span><br><span class="line">      // this.$router.push(&#123; name: &#x27;user&#x27;, params: &#123; username: &#x27;eduardo&#x27; &#125; &#125;)</span><br><span class="line"></span><br><span class="line">      // 传递的传参数可以是hash</span><br><span class="line">      // this.$router.push(&#123; path: &#x27;/about&#x27;, hash: &#x27;#team&#x27; &#125;)</span><br><span class="line"></span><br><span class="line">      // 通过replace跳转的页面(没有历史记录)</span><br><span class="line">      // 历史记录中（1，2，3）中的3被替换成4--&gt;(1,2,4)</span><br><span class="line">      // this.$router.replace()//作用和this.$router.push一样，（他把当前路径替换成replace中的路径）</span><br><span class="line">      // 在历史记录中，也是将当前记录替换成replace中的</span><br><span class="line">      // this.$router.replace(&#123; path: &#x27;/ok&#x27; &#125;)</span><br><span class="line"></span><br><span class="line">      // router.push(&#123; path: &#x27;/home&#x27;, replace: true &#125;)</span><br><span class="line">      // 相当于</span><br><span class="line">      // router.replace(&#123; path: &#x27;/home&#x27; &#125;)</span><br><span class="line"></span><br><span class="line">      // 通过go横跨页面，（当然也可以使用forworld()向前，back（）向后）</span><br><span class="line">      // this.$router.go(1)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style&gt;</span><br><span class="line"></span><br><span class="line">ul,li&#123;</span><br><span class="line">  list-style: none;</span><br><span class="line">  text-decoration: none;</span><br><span class="line">  text-align: start;</span><br><span class="line">  padding: 0;</span><br><span class="line">  margin: 0;</span><br><span class="line">  width: 100%;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">.router-link &#123;</span><br><span class="line">  text-decoration: none;</span><br><span class="line">  color: #333;</span><br><span class="line">  height: 40px;</span><br><span class="line">  background-color: rgb(247,248,248);</span><br><span class="line">  display: block;</span><br><span class="line">  line-height: 40px;</span><br><span class="line">  font-size: 15px;</span><br><span class="line">  font-weight: bold;</span><br><span class="line">  padding-left: 30px;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">.left-bar .main-title &#123;</span><br><span class="line">  height: 60px;</span><br><span class="line">  display: block;</span><br><span class="line">  line-height: 60px;</span><br><span class="line">  font-size: 20px;</span><br><span class="line">  font-weight: bold;</span><br><span class="line">  padding-left: 15px;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
<h1 id="首页布局代码"><a href="#首页布局代码" class="headerlink" title="首页布局代码"></a>首页布局代码</h1><p>/* 让容器沾满全屏的高度 <em>/<br>  height: 100vh;<br>/</em> 让容器占满剩余位置 */<br>  flex-grow: 1;<br>  <figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div id=&quot;app&quot;&gt;</span><br><span class="line">    &lt;div class=&quot;leftBar&quot;&gt;</span><br><span class="line">      &lt;LeftBar&gt;&lt;/LeftBar&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    &lt;div class=&quot;rightContent&quot;&gt;</span><br><span class="line">      &lt;!-- 因只有一个页面，所以不论router-link和router-view写在哪里都是可以匹配的 --&gt;</span><br><span class="line">      &lt;router-view&gt;&lt;/router-view&gt;</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">import LeftBar from &#x27;./components/LeftBar.vue&#x27;</span><br><span class="line"></span><br><span class="line">export default&#123;</span><br><span class="line">  components:&#123;</span><br><span class="line">    LeftBar</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style&gt;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line"></span><br><span class="line">#app &#123;</span><br><span class="line">  font-family: Avenir, Helvetica, Arial, sans-serif;</span><br><span class="line">  -webkit-font-smoothing: antialiased;</span><br><span class="line">  -moz-osx-font-smoothing: grayscale;</span><br><span class="line">  text-align: center;</span><br><span class="line">  color: #2c3e50;</span><br><span class="line">  width: 100%;</span><br><span class="line">  height: 100%;</span><br><span class="line">  display: flex;</span><br><span class="line">  /* 让容器沾满全屏 */</span><br><span class="line">  height: 100vh;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">nav &#123;</span><br><span class="line">  padding: 30px;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">nav a &#123;</span><br><span class="line">  font-weight: bold;</span><br><span class="line">  color: #2c3e50;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">nav a.router-link-exact-active &#123;</span><br><span class="line">  color: #42b983;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">.leftBar &#123;</span><br><span class="line">  width: 200px;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">.rightContent &#123;</span><br><span class="line">  /* 让容器占满剩余位置 */</span><br><span class="line">  flex-grow: 1;</span><br><span class="line">  border-left: 1px solid #333;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure></p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2022/03/22/vuew-router%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8/" data-id="cl127vs2500014sw62kry9vm4" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-vue-router的创建过程" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2022/03/22/vue-router%E7%9A%84%E5%88%9B%E5%BB%BA%E8%BF%87%E7%A8%8B/" class="article-date">
  <time datetime="2022-03-22T14:02:45.000Z" itemprop="datePublished">2022-03-22</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2022/03/22/vue-router%E7%9A%84%E5%88%9B%E5%BB%BA%E8%BF%87%E7%A8%8B/">vue-router的创建过程</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h1 id="Vue-Router的使用（插件）"><a href="#Vue-Router的使用（插件）" class="headerlink" title="Vue Router的使用（插件）"></a>Vue Router的使用（插件）</h1><h2 id="功能"><a href="#功能" class="headerlink" title="功能"></a>功能</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">嵌套路由映射</span><br><span class="line">动态路由选择</span><br><span class="line">模块化、基于组件的路由配置</span><br><span class="line">路由参数、查询、通配符</span><br><span class="line">展示由 Vue.js 的过渡系统提供的过渡效果</span><br><span class="line">细致的导航控制</span><br><span class="line">自动激活 CSS 类的链接</span><br><span class="line">HTML5 history 模式或 hash 模式</span><br><span class="line">可定制的滚动行为</span><br><span class="line">URL 的正确编码</span><br></pre></td></tr></table></figure>
<h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">npm i vue-router</span><br><span class="line">vue add router</span><br></pre></td></tr></table></figure>
<p>使用vue add router 安装时全选yes（回车）就可以了，安装完成后会自动一个router文件和view文件</p>
<p>使用npm i vue-router安装时，所有的相关配置都要自己手动配置</p>
<h2 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h2><p>以npm i vue-router安装为例:</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">import Vue from &#x27;vue&#x27;</span><br><span class="line">import App from &#x27;./App.vue&#x27;</span><br><span class="line">import router from &#x27;./router&#x27;</span><br><span class="line"></span><br><span class="line">// 配置调试信息</span><br><span class="line">Vue.config.productionTip = false</span><br><span class="line"></span><br><span class="line">new Vue(&#123;</span><br><span class="line">  router,</span><br><span class="line">  render: h =&gt; h(App)</span><br><span class="line">&#125;).$mount(&#x27;#app&#x27;)</span><br><span class="line"></span><br><span class="line">需要在main.js中注册router组件</span><br></pre></td></tr></table></figure>
<h3 id="路由表：路由表放在router文件中"><a href="#路由表：路由表放在router文件中" class="headerlink" title="路由表：路由表放在router文件中"></a>路由表：路由表放在router文件中</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br></pre></td><td class="code"><pre><span class="line">import Vue from &#x27;vue&#x27;</span><br><span class="line">import VueRouter from &#x27;vue-router&#x27;</span><br><span class="line">import HomeView from &#x27;../views/HomeView.vue&#x27;</span><br><span class="line"></span><br><span class="line">//通过vue.use的方式注册路由</span><br><span class="line">Vue.use(VueRouter)</span><br><span class="line"></span><br><span class="line">// 路由表，配置路由相关信息</span><br><span class="line">const routes = [</span><br><span class="line">  &#123;</span><br><span class="line">    path: &#x27;/&#x27;,</span><br><span class="line">    name: &#x27;home&#x27;,</span><br><span class="line">    // 这样的引用方式是静态引入</span><br><span class="line">    component: HomeView,</span><br><span class="line">    // 写数据，当前HomeView下可以拿到这些数据</span><br><span class="line">    // 在HomeView组件中，的mounted()&#123;&#125;生命周期中获取，也可以直接通过&#123;&#123;mustarche&#125;&#125;语法使用</span><br><span class="line">    // 通过this.$route获取(路由表中数据)数据</span><br><span class="line">    meta:&#123;&#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  &#123;</span><br><span class="line">    path: &#x27;/right&#x27;,</span><br><span class="line">    name: &#x27;content&#x27;,</span><br><span class="line">    component: ()=&gt; </span><br><span class="line">    // 动态引入</span><br><span class="line">    // 这个注释是用来标注引入模块是什么名字</span><br><span class="line">    import(/* webpackChunkName: &quot;content&quot; */&quot;../components/RightContent.vue&quot;)</span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  &#123;</span><br><span class="line">    path: &#x27;/right1&#x27;,</span><br><span class="line">    // 重定项</span><br><span class="line">    redirect:&quot;/right&quot;</span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  // 动态路由</span><br><span class="line">  &#123;</span><br><span class="line">    //  /:id动态传值,这里有值了后,前面使用router-link跳转时要传值</span><br><span class="line">    // 例如:&quot;/post/13&quot;,  这里的13就是动态数据</span><br><span class="line">    // 静态的内容不能变,动态的数据必须传</span><br><span class="line">    path:&quot;/post/:id&quot;,</span><br><span class="line">    component: ()=&gt; </span><br><span class="line">    // 这个注释是用来标注引入模块是什么名字</span><br><span class="line">    import(/* webpackChunkName: &quot;post&quot; */&quot;../views/post/post.vue&quot;)</span><br><span class="line">  &#125;,</span><br><span class="line"></span><br><span class="line">  // 嵌套路由,路由中套路由</span><br><span class="line">  &#123;</span><br><span class="line">    path:&quot;/post/:id&quot;,</span><br><span class="line">    component: ()=&gt; </span><br><span class="line">    import(/* webpackChunkName: &quot;post&quot; */&quot;../views/post/post.vue&quot;),</span><br><span class="line">    // 嵌套路由要在children中配置,</span><br><span class="line">    // 路径中有&quot;/&quot;会被当成根路径</span><br><span class="line">    // </span><br><span class="line">    children:[</span><br><span class="line">      &#123;</span><br><span class="line">        path:&quot;:id&quot;,</span><br><span class="line">        // 在post.vue中放一个router-view可以通过嵌套路由,将要嵌套的postDetail.vue映射过去</span><br><span class="line">        // component:import(/* webpackChunkName: &quot;postDetail&quot; */&quot;../views/post/postDetail.vue&quot;),</span><br><span class="line">      &#125;</span><br><span class="line">    ]</span><br><span class="line">  &#125;</span><br><span class="line">]</span><br><span class="line"></span><br><span class="line">// 在这里实例化路由，并将路由表给实例化对象，</span><br><span class="line">// 还可以在这里配置相关的信息，</span><br><span class="line">const router = new VueRouter(&#123;</span><br><span class="line">  mode: &#x27;history&#x27;,</span><br><span class="line">  base: process.env.BASE_URL,</span><br><span class="line">  routes</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">export default router</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h3 id="通过router-link和router-view就可以展示页面"><a href="#通过router-link和router-view就可以展示页面" class="headerlink" title="通过router-link和router-view就可以展示页面"></a>通过router-link和router-view就可以展示页面</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 跳转页面 --&gt;</span><br><span class="line">// 和a标签很类似</span><br><span class="line">&lt;router-link to=&quot;/right&quot;&gt;&lt;/router-link&gt;</span><br><span class="line">&lt;!-- 映射路由 --&gt;</span><br><span class="line">// &lt;router-view&gt;组件，用于映射跳转页面（相当于一个容器）</span><br><span class="line">可以放在任何的地方</span><br><span class="line">&lt;router-view&gt;123&lt;/router-view&gt;</span><br></pre></td></tr></table></figure>
<h2 id="过程"><a href="#过程" class="headerlink" title="过程"></a>过程</h2><p>先配置路由（可以是静态路由，也可以是动态），实例化路由（router）并传入routes（路由表），mode（模式）等，然后导出router，在main.js中注册router。然后就可以使用router-view（类似slot）是一个容器，router-link用于跳转，类似a标签</p>
<h2 id="查看路由信息"><a href="#查看路由信息" class="headerlink" title="查看路由信息"></a>查看路由信息</h2><p>在一个组件内部调用router的api，通过this.$route查看有哪些api(这已经被挂载在vue原型上了)，对应当前组件的路由。<br>this.$touter就是vue-router的一个实例（相当于new Vue，实例化后，也会生成一个全局的router），对应router的全局配置</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2022/03/22/vue-router%E7%9A%84%E5%88%9B%E5%BB%BA%E8%BF%87%E7%A8%8B/" data-id="cl127vs1s00004sw65n0oc7mf" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-axios学习" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2022/03/20/axios%E5%AD%A6%E4%B9%A0/" class="article-date">
  <time datetime="2022-03-20T12:03:05.000Z" itemprop="datePublished">2022-03-20</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2022/03/20/axios%E5%AD%A6%E4%B9%A0/">axios学习</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h1 id="axios"><a href="#axios" class="headerlink" title="axios"></a>axios</h1><h2 id="安装"><a href="#安装" class="headerlink" title="安装"></a>安装</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install axios</span><br></pre></td></tr></table></figure>
<h2 id="特性"><a href="#特性" class="headerlink" title="特性"></a>特性</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">1.从浏览器中创建XMLHttpRequests</span><br><span class="line">2.从node.js创建http请求</span><br><span class="line">3.支持PromiseAPI</span><br><span class="line">4.拦截请求和响应</span><br><span class="line">5.转换请求数据和响应数据</span><br><span class="line">6.取消请求</span><br><span class="line">7.自动转换JSOn数据</span><br><span class="line">8.客户端支持防御SXRF</span><br></pre></td></tr></table></figure>
<h2 id="使用"><a href="#使用" class="headerlink" title="使用"></a>使用</h2><h3 id="get"><a href="#get" class="headerlink" title="get"></a>get</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">// 为给定 ID 的 user 创建请求</span><br><span class="line">axios.get(&#x27;/user?ID=12345&#x27;)</span><br><span class="line">  .then(function (response) &#123;</span><br><span class="line">    console.log(response);</span><br><span class="line">  &#125;)</span><br><span class="line">  .catch(function (error) &#123;</span><br><span class="line">    console.log(error);</span><br><span class="line">  &#125;);</span><br><span class="line"></span><br><span class="line">// 上面的请求也可以这样做</span><br><span class="line">axios.get(&#x27;/user&#x27;, &#123;</span><br><span class="line">    params: &#123;</span><br><span class="line">      ID: 12345</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;)</span><br><span class="line">  .then(function (response) &#123;</span><br><span class="line">    console.log(response);</span><br><span class="line">  &#125;)</span><br><span class="line">  .catch(function (error) &#123;</span><br><span class="line">    console.log(error);</span><br><span class="line">  &#125;);</span><br></pre></td></tr></table></figure>
<h3 id="post"><a href="#post" class="headerlink" title="post"></a>post</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">axios.post(&#x27;/user&#x27;, &#123;</span><br><span class="line">    firstName: &#x27;Fred&#x27;,</span><br><span class="line">    lastName: &#x27;Flintstone&#x27;</span><br><span class="line">  &#125;)</span><br><span class="line">  .then(function (response) &#123;</span><br><span class="line">    console.log(response);</span><br><span class="line">  &#125;)</span><br><span class="line">  .catch(function (error) &#123;</span><br><span class="line">    console.log(error);</span><br><span class="line">  &#125;);</span><br></pre></td></tr></table></figure>
<h4 id="执行多个并发请求"><a href="#执行多个并发请求" class="headerlink" title="执行多个并发请求"></a>执行多个并发请求</h4><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">function getUserAccount() &#123;</span><br><span class="line">  return axios.get(&#x27;/user/12345&#x27;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">function getUserPermissions() &#123;</span><br><span class="line">  return axios.get(&#x27;/user/12345/permissions&#x27;);</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">axios.all([getUserAccount(), getUserPermissions()])</span><br><span class="line">//第一个参数，是第一个接口的值</span><br><span class="line">  .then(axios.spread(function (acct, perms) &#123;</span><br><span class="line">    // 两个请求现在都执行完成</span><br><span class="line">  &#125;));</span><br></pre></td></tr></table></figure>
<h3 id="axios-API"><a href="#axios-API" class="headerlink" title="axios API"></a>axios API</h3><p>可以通过向 axios 传递相关配置来创建请求</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">// 发送 POST 请求</span><br><span class="line">axios(&#123;</span><br><span class="line">  method: &#x27;post&#x27;,</span><br><span class="line">  url: &#x27;/user/12345&#x27;,</span><br><span class="line">  //post类型使用data，get类型使用params</span><br><span class="line">  data: &#123;</span><br><span class="line">    firstName: &#x27;Fred&#x27;,</span><br><span class="line">    lastName: &#x27;Flintstone&#x27;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;);</span><br></pre></td></tr></table></figure>
<h2 id="创建axios实例"><a href="#创建axios实例" class="headerlink" title="创建axios实例"></a>创建axios实例</h2><h3 id="axios-create-config"><a href="#axios-create-config" class="headerlink" title="axios.create([config])"></a>axios.create([config])</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">const instance = axios.create(&#123;</span><br><span class="line">  baseURL: &#x27;https://some-domain.com/api/&#x27;,</span><br><span class="line">  timeout: 1000,</span><br><span class="line">  headers: &#123;&#x27;X-Custom-Header&#x27;: &#x27;foobar&#x27;&#125;</span><br><span class="line">&#125;); </span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">import axios from &quot;axios&quot;;</span><br><span class="line">import qs from &quot;qs&quot;;</span><br><span class="line">const hxios = axios.create(&#123;</span><br><span class="line">  baseURL:&quot;/api&quot;,</span><br><span class="line">  transformRequest:[</span><br><span class="line">    function(data,headers) &#123;</span><br><span class="line">      console.log(&quot;----------------------&quot;);</span><br><span class="line">      // qs是用来对数据进行序列化的</span><br><span class="line">      return qs.stringify(data);</span><br><span class="line">    &#125;,</span><br><span class="line">  ],</span><br><span class="line">  timeot:4000,</span><br><span class="line">&#125;);</span><br><span class="line">export default hxios;</span><br></pre></td></tr></table></figure>
<h2 id="二次封装axios"><a href="#二次封装axios" class="headerlink" title="二次封装axios"></a>二次封装axios</h2><p>创建一个axios.js文件<br>在文件中二次封axios<br>将二次封装的axios放到vue原型上（或者直接在要使用的文件中引用）<br>例如：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><span class="line">const axios = require(&#x27;axios&#x27;);</span><br><span class="line"></span><br><span class="line">const request = axios.create(&#123;</span><br><span class="line">  // 自动让添加到请求路径上，被代理服务器拦截后，可以通过代理服务器将baseYURL去掉</span><br><span class="line">  baseURL:&quot;/api&quot;,</span><br><span class="line">  // 设置请求超时时间，一般设置为3，4秒</span><br><span class="line">  timeout:4000,</span><br><span class="line">  // `params` 是即将与请求一起发送的 URL 参数</span><br><span class="line">  // 必须是一个无格式对象(plain object)或 URLSearchParams 对象</span><br><span class="line">  // get请求时使用</span><br><span class="line">  params: &#123;</span><br><span class="line">    ID: 12345</span><br><span class="line">  &#125;,</span><br><span class="line">  // post请求时使用的传输数据的对象</span><br><span class="line">  // data: &#123;</span><br><span class="line">  //   firstName: &#x27;Fred&#x27;</span><br><span class="line">  // &#125;,</span><br><span class="line">  // header是即将被发送的自定义请求头</span><br><span class="line">  // headers:&#123;&#x27;X-Requested-With&#x27;: &#x27;XMLHttpRequest&#x27;&#125;,</span><br><span class="line">  // `method` 是创建请求时使用的方法</span><br><span class="line">  // method: &#x27;get&#x27;, // default</span><br><span class="line">  // `transformRequest` 允许在向服务器发送前，修改请求数据</span><br><span class="line">  // 只能用在 &#x27;PUT&#x27;, &#x27;POST&#x27; 和 &#x27;PATCH&#x27; 这几个请求方法</span><br><span class="line">  // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream</span><br><span class="line">  // transformRequest: [function (data, headers) &#123;</span><br><span class="line">  //   // 对 data 进行任意转换处理</span><br><span class="line">  //   return data;</span><br><span class="line">  // &#125;],</span><br><span class="line"></span><br><span class="line">  // `transformResponse` 在传递给 then/catch 前，允许修改响应数据</span><br><span class="line">  transformResponse: [function (data) &#123;</span><br><span class="line">    // 对 data 进行任意转换处理</span><br><span class="line">    return data;</span><br><span class="line">  &#125;],</span><br><span class="line"></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">module.exports = request;</span><br></pre></td></tr></table></figure>
<h1 id="跨域问题的解决"><a href="#跨域问题的解决" class="headerlink" title="跨域问题的解决"></a>跨域问题的解决</h1><h2 id="方法一"><a href="#方法一" class="headerlink" title="方法一"></a>方法一</h2><p>在服务端设置白名单</p>
<h2 id="方法二"><a href="#方法二" class="headerlink" title="方法二"></a>方法二</h2><p>设置一个本地代理服务器，用代理服务器请求接口服务器，在通过代理服务器将数据发送给浏览器（页面）</p>
<h2 id="设置全局axios"><a href="#设置全局axios" class="headerlink" title="设置全局axios"></a>设置全局axios</h2><p>在main.js中引入axios，并将axios放到vue的原型中，例如：<br>Vue.prototype.$axios=axios</p>
<h3 id="例子："><a href="#例子：" class="headerlink" title="例子："></a>例子：</h3><p>过程：客户端发起请求，被代理服务器拦截，然后代理服务器将数据放松给目标服务器</p>
<p>main.js文件中添加以下代码,将axios放到vue的原型中</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">import axios from &#x27;axios&#x27;</span><br><span class="line">Vue.prototype.$axios = axios;</span><br></pre></td></tr></table></figure>
<p>vue.config.js文件中写入以下代理服务器拦截请求的代码（vue.config.js文件没有就自己创建）】<br>在更目录下创建vue.config.js配置文件<br>关于打包的信息都可以使用vue.config.js配置</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">//过程：客户端发起请求，被代理服务器拦截，然后代理服务器将数据放松给目标服务器</span><br><span class="line">module.exports =&#123;</span><br><span class="line">  // 用来设置本地开发服务的</span><br><span class="line">  devServer: &#123;</span><br><span class="line">    //代理</span><br><span class="line">    proxy: &#123;</span><br><span class="line">      //拦截一个请求</span><br><span class="line">      // 如果请求接口有/api，就将这个请求代理到target的url这个地址中</span><br><span class="line">      &quot;/api&quot; : &#123;</span><br><span class="line">        target: &quot;http://192.168.0.13:8081&quot;,</span><br><span class="line">        //是否返回数据</span><br><span class="line">        changeOrigin:true,</span><br><span class="line">        //路径重写</span><br><span class="line">        pathRewrite:&#123;</span><br><span class="line">          //通过正则</span><br><span class="line">          //将以/api开头的路径中的/api替换成空字符串</span><br><span class="line">          &quot;^/api&quot;:&quot;&quot;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
<p>创建server.js文件，用以写接口代码（或不要这个文件，直接去请求接口）</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line">const Koa  = require(&#x27;koa&#x27;);</span><br><span class="line">const Router = require(&#x27;koa-router&#x27;);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">const app = new Koa();</span><br><span class="line">const router = new Router();</span><br><span class="line"></span><br><span class="line">router.get(&quot;/api&quot;,(ctx) =&gt;&#123;</span><br><span class="line">  ctx.body = &#x27;你φ(*￣0￣)&#x27;;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">app.use(router.routes()).use(router.allowedMethods());</span><br><span class="line"></span><br><span class="line">app.listen(8081,()=&gt;&#123;</span><br><span class="line">  console.log(&quot;server is running &quot;)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>调用axios请求接口</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">changeMsg:function() &#123;</span><br><span class="line">      this.$axios.get(&#x27;/api&#x27;,&#123;</span><br><span class="line">        params:&#123;</span><br><span class="line">          Id:10</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;).then(res =&gt; &#123;</span><br><span class="line">        console.log(res);</span><br><span class="line">      &#125;).catch(error =&gt; &#123;</span><br><span class="line">        console.log(error);</span><br><span class="line">      &#125;)</span><br><span class="line">    &#125;</span><br></pre></td></tr></table></figure>
<p>过程</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><span class="line">1引入axios</span><br><span class="line">2.发送请求</span><br><span class="line">3.解决跨域，服务器代理</span><br><span class="line">  1：新建vue.config.js（项目更目录）</span><br><span class="line">  2：写代理配置</span><br><span class="line">  module.exports =&#123;</span><br><span class="line">  // 用来设置本地开发服务的</span><br><span class="line">  devServer: &#123;</span><br><span class="line">    proxy: &#123;</span><br><span class="line">      // 如果请求接口有/api，就将这个请求代理到target的&lt;url&gt;这个地址中</span><br><span class="line">      &quot;/api&quot; : &#123;</span><br><span class="line">        trget: &quot;http://192.168.0.13:8080/&quot;,</span><br><span class="line">        changeOrigin:true,</span><br><span class="line">        //路径重写</span><br><span class="line">        pathRewrite:&#123;</span><br><span class="line">          //通过正则</span><br><span class="line">          //将以/api开头的路径中的/api替换成空字符串</span><br><span class="line">          &quot;^/api&quot;:&quot;&quot;</span><br><span class="line">        &#125;</span><br><span class="line">      &#125;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
<h2 id="拦截器"><a href="#拦截器" class="headerlink" title="拦截器"></a>拦截器</h2><p>拦截器的用法和生命周期有点像</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br></pre></td><td class="code"><pre><span class="line">const axios = require(&#x27;axios&#x27;);</span><br><span class="line"></span><br><span class="line">const req = axios.create(&#123;</span><br><span class="line">  // 自动让添加到请求路径上，被代理服务器拦截后，可以通过代理服务器将baseYURL去掉</span><br><span class="line">  baseURL:&quot;/api&quot;,</span><br><span class="line">  // 设置请求超时时间，一般设置为3，4秒</span><br><span class="line">  timeout:4000,</span><br><span class="line">  // `params` 是即将与请求一起发送的 URL 参数</span><br><span class="line">  // 必须是一个无格式对象(plain object)或 URLSearchParams 对象</span><br><span class="line">  // get请求时使用</span><br><span class="line">  params: &#123;</span><br><span class="line">    ID: 12345</span><br><span class="line">  &#125;,</span><br><span class="line">  // post请求时使用的传输数据的对象</span><br><span class="line">  // data: &#123;</span><br><span class="line">  //   firstName: &#x27;Fred&#x27;</span><br><span class="line">  // &#125;,</span><br><span class="line">  // header是即将被发送的自定义请求头</span><br><span class="line">  // headers:&#123;&#x27;X-Requested-With&#x27;: &#x27;XMLHttpRequest&#x27;&#125;,</span><br><span class="line">  // `method` 是创建请求时使用的方法</span><br><span class="line">  // method: &#x27;get&#x27;, // default</span><br><span class="line">  // `transformRequest` 允许在向服务器发送前，修改请求数据</span><br><span class="line">  // 只能用在 &#x27;PUT&#x27;, &#x27;POST&#x27; 和 &#x27;PATCH&#x27; 这几个请求方法</span><br><span class="line">  // 后面数组中的函数必须返回一个字符串，或 ArrayBuffer，或 Stream</span><br><span class="line">  // transformRequest: [function (data, headers) &#123;</span><br><span class="line">  //   // 对 data 进行任意转换处理</span><br><span class="line">  //   return data;</span><br><span class="line">  // &#125;],</span><br><span class="line"></span><br><span class="line">  // `transformResponse` 在传递给 then/catch 前，允许修改响应数据</span><br><span class="line">  transformResponse: [function (data) &#123;</span><br><span class="line">    // 对 data 进行任意转换处理</span><br><span class="line">    return data;</span><br><span class="line">  &#125;],</span><br><span class="line"></span><br><span class="line">&#125;);</span><br><span class="line"></span><br><span class="line">// 请求拦截器</span><br><span class="line">req.interceptors.request.use(</span><br><span class="line">  function (config) &#123;</span><br><span class="line">    // 在发送请求之前做些什么</span><br><span class="line">    return config;</span><br><span class="line">  &#125;,</span><br><span class="line">  function (error) &#123;</span><br><span class="line">    // 对请求错误做些什么 包含了状态码</span><br><span class="line">    return Promise.reject(error);</span><br><span class="line">  &#125;</span><br><span class="line">);</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">// 响应拦截器</span><br><span class="line">req.interceptors.response.use(</span><br><span class="line">  function (response) &#123;</span><br><span class="line">    // 对响应数据做点什么</span><br><span class="line">    return response;</span><br><span class="line">  &#125;,</span><br><span class="line">  function (error) &#123;</span><br><span class="line">    // 对响应错误做点什么</span><br><span class="line">    console.log(error, &quot;-------------&quot;);</span><br><span class="line">    return Promise.reject(&quot;你出错了！但是呢就不告诉哪里错了&quot;);</span><br><span class="line">  &#125;</span><br><span class="line">);</span><br><span class="line"></span><br><span class="line">module.exports = req;</span><br></pre></td></tr></table></figure>
<h1 id="数据格式-在浏览器中"><a href="#数据格式-在浏览器中" class="headerlink" title="数据格式(在浏览器中)"></a>数据格式(在浏览器中)</h1><p>get请求提交的数据格式：query String<br>post请求提交的数据： Payload<br>form表单提交的数据：form data</p>
<h1 id="常见状态码"><a href="#常见状态码" class="headerlink" title="常见状态码"></a>常见状态码</h1><p>401,403,404,500,501,502<br>400：Bad Request–客户端请求的语法错误，服务器无法理解<br>401:没有权限（例如：没有带校验信息）<br>403：forbidden–服务器理解请求客户端的请求，但是拒绝执行此请求<br>404;NOT Found–服务器无法根据客户端的请求找到资源（网页）。（与401类似）‘<br>500：Internal Server Error – 服务器内部错误，无法完成请求<br>501：Not Implemented–服务器不支持请求的功能，无法完成请求<br>502：Bad Gateway–作为网关或者代理工作的服务器尝试执行请求时，从远程服务器接收到了一个无效的响应<br>503：Service Unavailable–由于超载或系统维护，服务器暂时的无法处理客户端的请求。延时的长度可包含在服务器的Retry-After头信息中    </p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2022/03/20/axios%E5%AD%A6%E4%B9%A0/" data-id="cl0z8jhwu000034w60af4dx9x" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-了解vue组件" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2022/03/16/%E4%BA%86%E8%A7%A3vue%E7%BB%84%E4%BB%B6/" class="article-date">
  <time datetime="2022-03-16T09:01:08.000Z" itemprop="datePublished">2022-03-16</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2022/03/16/%E4%BA%86%E8%A7%A3vue%E7%BB%84%E4%BB%B6/">了解vue组件</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h1 id="点击事件和v-if（v-show）的组合使用"><a href="#点击事件和v-if（v-show）的组合使用" class="headerlink" title="点击事件和v-if（v-show）的组合使用"></a>点击事件和v-if（v-show）的组合使用</h1><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&quot;aBody&quot;&gt;</span><br><span class="line">    &lt;span class=&quot;title&quot;&gt;我，子组件。&lt;/span&gt;</span><br><span class="line">    &lt;!-- 通过v-if或v-show的方式让标签消失出现 --&gt;</span><br><span class="line">    &lt;span class=&quot;info&quot; v-show=&quot;isShow&quot;&gt;&#123;&#123;title&#125;&#125;&lt;/span&gt;</span><br><span class="line">    &lt;span class=&quot;info&quot; v-if=&quot;isShow&quot;&gt;&#123;&#123;title&#125;&#125;&lt;/span&gt;</span><br><span class="line">    &lt;!-- 给btn添加点击事件 @ 是 v-on:  的语法糖--&gt;</span><br><span class="line">    &lt;button class=&quot;btn&quot; @click=&quot;changeInfo&quot;&gt;展示info&lt;/button&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  data()&#123;</span><br><span class="line">    // 必须有返回值，且返回一个对象</span><br><span class="line">    // 返回的是一个vue的对象，所以里面的变量可以是用，  this.xxx获取</span><br><span class="line">    return &#123;</span><br><span class="line">      title:&#x27;&#x27;,</span><br><span class="line">      isShow:false</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods:&#123;</span><br><span class="line">    changeInfo:function() &#123;</span><br><span class="line">      this.title = &#x27;啊被发现了吗!  ,,ԾㅂԾ,,&#x27;;</span><br><span class="line">      // 点击后将isShow取反后的值赋值给他自己，</span><br><span class="line">      // 以实现通过点击然一个标签消失，出现</span><br><span class="line">      this.isShow = !this.isShow;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style&gt;</span><br><span class="line"></span><br><span class="line">.btn &#123;</span><br><span class="line">  width: 100px;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
<h1 id="slot插槽"><a href="#slot插槽" class="headerlink" title="slot插槽"></a>slot插槽</h1><p>通过使用插槽可以在子组件中写入信息，如下：(JuniorSon是一个组件)</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;JuniorSon @results = &quot;accept&quot; class=&quot;son&quot; :index = &#x27;infos&#x27; item = &#x27;haha&#x27;&gt;</span><br><span class="line">    &lt;span&gt;&#123;&#123;something&#125;&#125;&lt;/span&gt;</span><br><span class="line">    &lt;span v-show=&quot;isShow&quot;&gt;son发来贺电：&#123;&#123;toBStr&#125;&#125;&lt;/span&gt;</span><br><span class="line">    &lt;button class=&quot;f-btn&quot;&gt;点击发送信息给son&lt;/button&gt;</span><br><span class="line">&lt;/JuniorSon&gt;</span><br></pre></td></tr></table></figure>
<p>在子组件中通过slot接收上面JuniorSon标签中的信息，否则JuniorSon标签中的信息就不会显示<br>slot所在位置就是JuniorSon标签中的信息所在位置</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&quot;aBody&quot;&gt;</span><br><span class="line">    &lt;!-- 插槽让组件的标签可以些内容，这些内容将放到slot中 --&gt;</span><br><span class="line">    &lt;slot&gt;&lt;/slot&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br></pre></td></tr></table></figure>
<h1 id="计算函数"><a href="#计算函数" class="headerlink" title="计算函数"></a>计算函数</h1><p>模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。<br>通过计算函数，减少标签中的逻辑性代码<br>计算函数都放在computed中，并且计算函数不能使用箭头函数（除非你不使用this）<br>如下计算函数toBStr，在使用时直接使用函数名即可</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br></pre></td><td class="code"><pre><span class="line">&lt;JuniorSon @results = &quot;accept&quot; class=&quot;son&quot; :index = &#x27;infos&#x27; item = &#x27;haha&#x27;&gt;</span><br><span class="line">    &lt;span&gt;&#123;&#123;something&#125;&#125;&lt;/span&gt;</span><br><span class="line">    &lt;span v-show=&quot;isShow&quot;&gt;son发来贺电：&#123;&#123;toBStr&#125;&#125;&lt;/span&gt;</span><br><span class="line">    &lt;button class=&quot;f-btn&quot;&gt;点击发送信息给son&lt;/button&gt;</span><br><span class="line">&lt;/JuniorSon&gt;</span><br><span class="line"></span><br><span class="line">export default &#123;</span><br><span class="line">  components:&#123;</span><br><span class="line">    JuniorSon</span><br><span class="line">  &#125;,</span><br><span class="line">  data() &#123;</span><br><span class="line">    return &#123;</span><br><span class="line">      something:&#x27;我是你爸爸&#x27;,</span><br><span class="line">      infos:&#x27;我是你爸爸，我有钱。哎╮（╯＿╰）╭&#x27;,</span><br><span class="line">      // 存放son传递过来的数据</span><br><span class="line">      sonData:[],</span><br><span class="line">      isShow:false</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods:&#123;</span><br><span class="line">    // 通过自定义事件接收juniorSon发送的信息</span><br><span class="line">    accept:function(event) &#123;</span><br><span class="line">      // 打印信息</span><br><span class="line">      console.log(event,arguments)</span><br><span class="line">      // 将信息存入sonData</span><br><span class="line">      const list = Array.from(arguments);</span><br><span class="line">      list.forEach(item =&gt; &#123;</span><br><span class="line">        this.sonData.push(item);</span><br><span class="line">      &#125;)</span><br><span class="line">      // 接收并显示信息</span><br><span class="line">      this.isShow = true</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  computed:&#123;</span><br><span class="line">    toBStr:function()&#123;</span><br><span class="line">      let str = &#x27;&#x27;;</span><br><span class="line">      this.sonData.forEach(item =&gt; &#123;</span><br><span class="line">        str += item + &#x27; &#x27;;</span><br><span class="line">      &#125;)</span><br><span class="line">      return str;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h1 id="监听函数"><a href="#监听函数" class="headerlink" title="监听函数"></a>监听函数</h1><p>监听函数放在watch中<br>函数名就是需要监听的变量名，<br>参数1–变化后的值<br>参数2–变化前的值</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">watch:&#123;</span><br><span class="line">    isShow:function(newData,oldData) &#123;</span><br><span class="line">      console.log(newData,oldData);</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure>
<h1 id="组件的生命周期"><a href="#组件的生命周期" class="headerlink" title="组件的生命周期"></a>组件的生命周期</h1><h2 id="生命周期函数"><a href="#生命周期函数" class="headerlink" title="生命周期函数"></a>生命周期函数</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">beforeCreate()&#123;&#125;</span><br><span class="line">created()&#123;&#125;</span><br><span class="line">beforeMount()&#123;&#125;</span><br><span class="line">mounted()&#123;&#125;</span><br><span class="line">beforeUpdate()&#123;&#125;</span><br><span class="line">updated()&#123;&#125;</span><br><span class="line">beforeDestroy()&#123;&#125;</span><br><span class="line">destroyed()&#123;&#125;</span><br></pre></td></tr></table></figure>
<h2 id="生命周期的4个阶段"><a href="#生命周期的4个阶段" class="headerlink" title="生命周期的4个阶段"></a>生命周期的4个阶段</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">create</span><br><span class="line">mount</span><br><span class="line">update</span><br><span class="line">destroy</span><br></pre></td></tr></table></figure>
<h2 id="生命周期函数的使用"><a href="#生命周期函数的使用" class="headerlink" title="生命周期函数的使用"></a>生命周期函数的使用</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><span class="line">export default &#123;</span><br><span class="line">beforeCreate()&#123;</span><br><span class="line">    console.log(&#x27;实例化前&#x27;)</span><br><span class="line">  &#125;,</span><br><span class="line">  created()&#123;</span><br><span class="line">    console.log(&#x27;完成实例&#x27;)</span><br><span class="line">  &#125;,</span><br><span class="line">  beforeMount()&#123;</span><br><span class="line">    console.log(&#x27;挂载前&#x27;)</span><br><span class="line">  &#125;,</span><br><span class="line">  mounted()&#123;</span><br><span class="line">    console.log(&#x27;完成挂载&#x27;) </span><br><span class="line">  &#125;,</span><br><span class="line">  beforeUpdate()&#123;</span><br><span class="line">    console.log(&#x27;数据更新，视图未更新&#x27;)</span><br><span class="line">  &#125;,</span><br><span class="line">  updated()&#123;</span><br><span class="line">    console.log(&#x27;数据更新，视图更新&#x27;)</span><br><span class="line">  &#125;,</span><br><span class="line">  beforeDestroy()&#123;</span><br><span class="line">    console.log(&#x27;销毁前&#x27;)</span><br><span class="line">  &#125;,</span><br><span class="line">  destroyed()&#123;</span><br><span class="line">    console.log(&#x27;销毁完成&#x27;)</span><br><span class="line">  &#125;&#125;</span><br></pre></td></tr></table></figure>
<h1 id="双向绑定"><a href="#双向绑定" class="headerlink" title="双向绑定"></a>双向绑定</h1><h2 id="v-model"><a href="#v-model" class="headerlink" title="v-model"></a>v-model</h2><p>通过向input中输入值，v-model将输入的值保存到message中，</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;div class=&quot;cla&quot;&gt;&#123;&#123;message&#125;&#125;&lt;/div&gt;</span><br><span class="line">&lt;input type=&quot;text&quot; v-model=&quot;message&quot;&gt;</span><br></pre></td></tr></table></figure>
<h1 id="请求接口的时机"><a href="#请求接口的时机" class="headerlink" title="请求接口的时机"></a>请求接口的时机</h1><p>created(){}中请求接口<br>接口的请求是异步的(请求的时间不确定)，解决<br>1.默认值<br>2.loading<br>数据没有加载完就使用默认的数据（loading显示），加载完成后就使用真正的数据（loading隐藏）<br>数据没有加载完就只能看见loading的加载页面</p>
<h1 id="父组件，子组件传值"><a href="#父组件，子组件传值" class="headerlink" title="父组件，子组件传值"></a>父组件，子组件传值</h1><h2 id="父组件传值子组件"><a href="#父组件传值子组件" class="headerlink" title="父组件传值子组件"></a>父组件传值子组件</h2><p>1.在父组件中先引入子组件，并注册。<br>2.然后就可以通过给组件JuniorSon设置动态绑定的属性，或静态属性，将数据传递给子组件</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- : 是v-bind: 的语法糖 使用后属性就可以直接使用变量了 --&gt;</span><br><span class="line">&lt;!-- 如果传递给子组件的信息是自定义属性，这样子组件的props不能获取到传递的信息，但可以通过this.$attrs获取到自定义属性信息 --&gt;</span><br><span class="line">  &lt;JuniorSon @results = &quot;accept&quot; class=&quot;son&quot; :index = &#x27;infos&#x27; item = &#x27;haha&#x27;&gt;</span><br><span class="line">    &lt;span&gt;&#123;&#123;something&#125;&#125;&lt;/span&gt;</span><br><span class="line">    &lt;span v-show=&quot;isShow&quot;&gt;son发来贺电：&#123;&#123;toBStr&#125;&#125;&lt;/span&gt;</span><br><span class="line">    &lt;button class=&quot;f-btn&quot;&gt;点击发送信息给son&lt;/button&gt;</span><br><span class="line">  &lt;/JuniorSon&gt;</span><br></pre></td></tr></table></figure>
<p>3.子组件通过props接收父组件传过来的信息<br>4.接收完毕后就可以使用了，用法和data中的变量一样</p>
<p>this.$props指向vue实例的props<br>this.props指向data中的props<br>this.$attrs可以获取到父组件传递过来的自定义属性的数据(数据如果没有在props中接收，那么就可以在attrs中找到未被接收的数据，如果props将数据全部接收，那么attrs中就没有可用的数据)<br>props有两种接收信息的方式</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">props: [&quot;index&quot;,&quot;item&quot;]</span><br><span class="line">//通过数组接收信息，变量名就是前面的自定义属性名（不能改变）</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">props:&#123;</span><br><span class="line">    index:&#123;</span><br><span class="line">      type:String,</span><br><span class="line">      required:true</span><br><span class="line">    &#125;,</span><br><span class="line">    item:&#123;</span><br><span class="line">      type:String,</span><br><span class="line">      required:true</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">    //通过对象接收信息,这样可以设置每一个变量的类型等。</span><br></pre></td></tr></table></figure>
<h3 id="子组件接收数据注意事项"><a href="#子组件接收数据注意事项" class="headerlink" title="子组件接收数据注意事项"></a>子组件接收数据注意事项</h3><p>子组件接受的父组件的值分为——引用类型和普通类型两种，<br>1.普通类型：字符串（String）、数字（Number）、布尔值（Boolean）、空（Null）<br>2.引用类型：数组（Array）、对象（Object）</p>
<p>其中，普通类型是可以在子组件中更改，不会影响其他兄弟子组件内同样调用的来自父组件的值，<br>但是，引用类型的值，当在子组件中修改后，父组件的也会修改，<br>那么后果就是，其他同样引用了改值的子组件内部的值也会跟着被修改。<br>除非你有特殊的要求这么去做，否则最好不要这么做。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">父组件传给子组件的值，在子组件中千万不能修改，因其数据是公用的，改了所有引用的子组件就都改了。</span><br></pre></td></tr></table></figure>
<h2 id="子组件传递数据给父组件"><a href="#子组件传递数据给父组件" class="headerlink" title="子组件传递数据给父组件"></a>子组件传递数据给父组件</h2><p>子组件通过this.$emit()将数据传给父组件</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">// 参数1---父子间中，使用子组件时定义的自定义事件的事件处理函数</span><br><span class="line">// 参数2，3，4---传递参数</span><br><span class="line">this.$emit(&#x27;results&#x27;,&#x27;你是个大帅逼&#x27;,&#x27;没错说的就是你&#x27;,&#x27;big SB&#x27;,)</span><br></pre></td></tr></table></figure>
<p>父组件通过JuniorSon上的自定义事件的事件处理函数，接收并处理数据</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 如果传递给子组件的信息是自定义属性，这样子组件的props不能获取到传递的信息，但可以通过this.$attrs获取到自定义属性信息 --&gt;</span><br><span class="line">  &lt;JuniorSon @results = &quot;accept&quot; class=&quot;son&quot; :index = &#x27;infos&#x27; item = &#x27;haha&#x27;&gt;</span><br><span class="line">    &lt;span&gt;&#123;&#123;something&#125;&#125;&lt;/span&gt;</span><br><span class="line">    &lt;span v-show=&quot;isShow&quot;&gt;son发来贺电：&#123;&#123;toBStr&#125;&#125;&lt;/span&gt;</span><br><span class="line">    &lt;button class=&quot;f-btn&quot;&gt;点击发送信息给son&lt;/button&gt;</span><br><span class="line">  &lt;/JuniorSon&gt;</span><br></pre></td></tr></table></figure>
<h2 id="兄弟组件互传信息"><a href="#兄弟组件互传信息" class="headerlink" title="兄弟组件互传信息"></a>兄弟组件互传信息</h2><p>其中一个兄弟组件将信息先传递给父组件，再通过父组件将信息传递给另有一个兄弟组件</p>
<h2 id="父组件"><a href="#父组件" class="headerlink" title="父组件"></a>父组件</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">&lt;!-- : 是v-bind: 的语法糖 使用后属性就可以直接使用变量了 --&gt;</span><br><span class="line">&lt;!-- 传递给子组件的信息不能是自定义属性，这样子组件的props不能获取到传递的信息，但可以通过this.$attrs获取到自定义属性信息 --&gt;</span><br><span class="line">  &lt;JuniorSon @results = &quot;accept&quot; class=&quot;son&quot; :index = &#x27;infos&#x27; item = &#x27;haha&#x27;&gt;</span><br><span class="line">    &lt;span&gt;&#123;&#123;something&#125;&#125;&lt;/span&gt;</span><br><span class="line">    &lt;span v-show=&quot;isShow&quot;&gt;son发来贺电：&#123;&#123;toBStr&#125;&#125;&lt;/span&gt;</span><br><span class="line">    &lt;button class=&quot;f-btn&quot;&gt;点击发送信息给son&lt;/button&gt;</span><br><span class="line">  &lt;/JuniorSon&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line">&lt;script&gt;</span><br><span class="line">import JuniorSon from &#x27;./JuniorSon.vue&#x27;;</span><br><span class="line"></span><br><span class="line"></span><br><span class="line">export default &#123;</span><br><span class="line">  components:&#123;</span><br><span class="line">    JuniorSon</span><br><span class="line">  &#125;,</span><br><span class="line">  data() &#123;</span><br><span class="line">    return &#123;</span><br><span class="line">      something:&#x27;我是你爸爸&#x27;,</span><br><span class="line">      infos:&#x27;我是你爸爸，我有钱。哎╮（╯＿╰）╭&#x27;,</span><br><span class="line">      // 存放son传递过来的数据</span><br><span class="line">      sonData:[],</span><br><span class="line">      isShow:false</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods:&#123;</span><br><span class="line">    // 通过自定义事件接收juniorSon发送的信息</span><br><span class="line">    accept:function(event) &#123;</span><br><span class="line">      // 打印信息</span><br><span class="line">      console.log(event,arguments)</span><br><span class="line">      // 将信息存入sonData</span><br><span class="line">      const list = Array.from(arguments);</span><br><span class="line">      list.forEach(item =&gt; &#123;</span><br><span class="line">        this.sonData.push(item);</span><br><span class="line">      &#125;)</span><br><span class="line">      // 接收并显示信息</span><br><span class="line">      this.isShow = true</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  computed:&#123;</span><br><span class="line">    toBStr:function()&#123;</span><br><span class="line">      let str = &#x27;&#x27;;</span><br><span class="line">      this.sonData.forEach(item =&gt; &#123;</span><br><span class="line">        str += item + &#x27; &#x27;;</span><br><span class="line">      &#125;)</span><br><span class="line">      return str;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style&gt;</span><br><span class="line">/* 设置组件的样式 */</span><br><span class="line">.son &#123;</span><br><span class="line">  width: 100%;</span><br><span class="line">  display: flex;</span><br><span class="line">  flex-direction: column;</span><br><span class="line">  align-content: center;</span><br><span class="line">  justify-content: center;</span><br><span class="line">&#125;</span><br><span class="line">span &#123;</span><br><span class="line">  width: 200px;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">.f-btn &#123;</span><br><span class="line">  margin: 20px 0;</span><br><span class="line">  width: 200px;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
<h2 id="子组件"><a href="#子组件" class="headerlink" title="子组件"></a>子组件</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">  &lt;div class=&quot;aBody&quot;&gt;</span><br><span class="line">    &lt;!-- 插槽让组件的标签可以些内容，这些内容将放到slot中 --&gt;</span><br><span class="line">    &lt;slot&gt;&lt;/slot&gt;</span><br><span class="line">    &lt;span class=&quot;title&quot;&gt;我，子组件。&lt;/span&gt;</span><br><span class="line">    &lt;!-- 通过v-if或v-show的方式让标签消失出现 --&gt;</span><br><span class="line">    &lt;!-- 前者是删除，后者是隐藏 --&gt;</span><br><span class="line">    &lt;span class=&quot;info&quot; v-show=&quot;isShow&quot;&gt;&#123;&#123;title&#125;&#125;&lt;/span&gt;</span><br><span class="line">    &lt;span class=&quot;info&quot; v-if=&quot;isShow&quot;&gt;father发来亲切的问候：&#123;&#123;index&#125;&#125;&lt;/span&gt;</span><br><span class="line">    &lt;!-- 给btn添加点击事件 @ 是 v-on:  的语法糖--&gt;</span><br><span class="line">    &lt;button class=&quot;btn&quot; @click=&quot;changeInfo&quot;&gt;展示info&lt;/button&gt;</span><br><span class="line"></span><br><span class="line">    &lt;button class=&quot;f-btn&quot; @click=&quot;sendInfoToFather&quot;&gt;点击发送信息给father&lt;/button&gt;</span><br><span class="line"></span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">export default &#123;</span><br><span class="line">  // </span><br><span class="line">  // props: [&quot;index&quot;,&quot;item&quot;],</span><br><span class="line">  // </span><br><span class="line">  props:&#123;</span><br><span class="line">    index:&#123;</span><br><span class="line">      type:String,</span><br><span class="line">      required:true</span><br><span class="line">    &#125;,</span><br><span class="line">    item:&#123;</span><br><span class="line">      type:String,</span><br><span class="line">      required:true</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  data()&#123;</span><br><span class="line">    // 必须有返回值，且返回一个对象</span><br><span class="line">    // 返回的是一个vue的对象，所以里面的变量可以是用，  this.xxx获取</span><br><span class="line">    return &#123;</span><br><span class="line">      title:&#x27;&#x27;,</span><br><span class="line">      isShow:false</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  methods:&#123;</span><br><span class="line">    changeInfo:function() &#123;</span><br><span class="line">      this.title = &#x27;啊被发现了吗!  ,,ԾㅂԾ,,&#x27;;</span><br><span class="line">      // 点击后将isShow取反后的值赋值给他自己，以实现通过点击然一个标签消失，出现</span><br><span class="line">      this.isShow = !this.isShow;</span><br><span class="line"></span><br><span class="line">      // 获取信息</span><br><span class="line">      console.log(this.$attrs)</span><br><span class="line">      console.log(this.$props)</span><br><span class="line">      console.log(this.index,this.item)</span><br><span class="line">    &#125;,</span><br><span class="line"></span><br><span class="line">    // 将信息发送给SeniorFather</span><br><span class="line">    sendInfoToFather: function() &#123;</span><br><span class="line">      // 参数1---父子间中，使用子组件时定义的自定义事件的事件处理函数</span><br><span class="line">      // 参数2，3，4---传递参数</span><br><span class="line">      this.$emit(&#x27;results&#x27;,&#x27;你是个大帅逼&#x27;,&#x27;没错说的就是你&#x27;,&#x27;big SB&#x27;,)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line"></span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style&gt;</span><br><span class="line"></span><br><span class="line">.info ,.title &#123;</span><br><span class="line">  width: 200px;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">.btn &#123;</span><br><span class="line">  width: 200px;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line">.f-btn &#123;</span><br><span class="line">  width: 200px;</span><br><span class="line">  margin-top: 20px;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/style&gt;</span><br></pre></td></tr></table></figure>
      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2022/03/16/%E4%BA%86%E8%A7%A3vue%E7%BB%84%E4%BB%B6/" data-id="cl0tcw4lz0000low652clh0e5" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-练习条件渲染，列表渲染，表单，获取节点" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2022/03/16/%E7%BB%83%E4%B9%A0%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93%EF%BC%8C%E5%88%97%E8%A1%A8%E6%B8%B2%E6%9F%93%EF%BC%8C%E8%A1%A8%E5%8D%95%EF%BC%8C%E8%8E%B7%E5%8F%96%E8%8A%82%E7%82%B9/" class="article-date">
  <time datetime="2022-03-16T09:01:08.000Z" itemprop="datePublished">2022-03-16</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2022/03/16/%E7%BB%83%E4%B9%A0%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93%EF%BC%8C%E5%88%97%E8%A1%A8%E6%B8%B2%E6%9F%93%EF%BC%8C%E8%A1%A8%E5%8D%95%EF%BC%8C%E8%8E%B7%E5%8F%96%E8%8A%82%E7%82%B9/">练习条件渲染，列表渲染，表单，获取节点</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h1 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h1><h2 id="v-once"><a href="#v-once" class="headerlink" title="v-once"></a>v-once</h2><p>插值只渲染一次</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&lt;div&gt;</span><br><span class="line">    &lt;!-- msg可以改变 --&gt;</span><br><span class="line">    &lt;span  class=&quot;text&quot;&gt;this is a dynamic sentence:&#123;&#123;msg&#125;&#125;&lt;/span&gt;</span><br><span class="line">    &lt;!-- msg值在第一次选然后就不会改变了 --&gt;</span><br><span class="line">    &lt;span v-once  class=&quot;text&quot;&gt;this is a static sentence:&#123;&#123;msg&#125;&#125;&lt;/span&gt;</span><br><span class="line">    &lt;!-- 双向绑定 --&gt;</span><br><span class="line">    &lt;input type=&quot;text&quot; v-model=&quot;msg&quot; placeholder=&quot;请输入somthing&quot;&gt;</span><br><span class="line">  &lt;/div&gt;</span><br></pre></td></tr></table></figure>
<h2 id="动态渲染html样式"><a href="#动态渲染html样式" class="headerlink" title="动态渲染html样式"></a>动态渲染html样式</h2><p>你的站点上动态渲染的任意 HTML 可能会非常危险，因为它很容易导致 XSS 攻击。请只对可信内容使用 HTML 插值，绝不要对用户提供的内容使用插值</p>
<h3 id="v-html"><a href="#v-html" class="headerlink" title="v-html"></a>v-html</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;p&gt;Using mustaches: &#123;&#123; rawHtml &#125;&#125;&lt;/p&gt;</span><br><span class="line">&lt;p&gt;Using v-html directive: &lt;span v-html=&quot;rawHtml&quot;&gt;&lt;/span&gt;&lt;/p&gt;</span><br></pre></td></tr></table></figure>
<h2 id="mustache语法与attribute"><a href="#mustache语法与attribute" class="headerlink" title="mustache语法与attribute"></a>mustache语法与attribute</h2><p>Mustache 语法不能作为属性值,但可以将属性与v-bind:结合后,将变量世界作为属性值,就可以形成动态绑定</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;span v-html=&quot;styles&quot;&gt;&#123;&#123;styles&#125;&#125;&lt;/span&gt;</span><br></pre></td></tr></table></figure>
<h2 id="javascript表达式"><a href="#javascript表达式" class="headerlink" title="javascript表达式"></a>javascript表达式</h2><p>表达式可以直接写在mustache语法中。例如：NaN</p>
<p>模板表达式都被放在沙盒中，只能访问全局变量的一个白名单，如 Math 和 Date 。你不应该在模板表达式中试图访问用户定义的全局变量。</p>
<h2 id="动态参数"><a href="#动态参数" class="headerlink" title="动态参数"></a>动态参数</h2><p>可以用来绑定属性，也可用用来绑定事件<br>这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;a v-bind:[attributeName]=&quot;url&quot;&gt; ... &lt;/a&gt;</span><br></pre></td></tr></table></figure>
<p>动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。</p>
<h2 id="修饰符"><a href="#修饰符" class="headerlink" title="修饰符"></a>修饰符</h2><p>修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。<br>例如：.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;form v-on:submit.prevent=&quot;onSubmit&quot;&gt;...&lt;/form&gt;</span><br></pre></td></tr></table></figure>
<h1 id="Class与Style的绑定"><a href="#Class与Style的绑定" class="headerlink" title="Class与Style的绑定"></a>Class与Style的绑定</h1><h2 id="对象语法"><a href="#对象语法" class="headerlink" title="对象语法"></a>对象语法</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 普通命名方式不用再次加引号，但这样的&#x27;text-a&#x27;要使用引号包裹 --&gt;</span><br><span class="line">    &lt;!-- 对象中可以只放一个键值对，也可以有多个键值对 --&gt;</span><br><span class="line">    &lt;!-- 当isShow的值是true时这个class名就会显示，反之不显示 --&gt;</span><br><span class="line">    &lt;!-- 因为这时动态绑定，所以要使用v-bind: --&gt;</span><br><span class="line">    &lt;span v-bind:class=&quot;&#123;class1:isShow,&#x27;text-live&#x27;:isShow&#125;&quot;&gt;123s&lt;/span&gt;</span><br></pre></td></tr></table></figure>
<p>也可以将动态绑定的值换成一个变量，如下：(只要变量中value为true就会显示对应的class名了)</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;span v-bind:class=&quot;checkClass&quot;&gt;123s&lt;/span&gt;</span><br><span class="line"></span><br><span class="line">checkClass:&#123;class1:true,&#x27;text-live&#x27;:true&#125;</span><br></pre></td></tr></table></figure>
<p>也可以通过计算属性返回一个处理过的对象</p>
<h2 id="数组语法"><a href="#数组语法" class="headerlink" title="数组语法"></a>数组语法</h2><p>动态绑定一个数组，数组中元素（变量）的值是什么，那么class就会后对应的class名，如果元素（变量）为空则不会添加这个class名</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;span v-bind:class=&quot;[a,b,c]&quot;&gt;123s&lt;/span&gt;</span><br></pre></td></tr></table></figure>
<p>当然这种设置class的方式也可以用在组件上</p>
<h1 id="对象语法-1"><a href="#对象语法-1" class="headerlink" title="对象语法"></a>对象语法</h1><p>可以通过以下方式动态绑定内联样式。当然直接绑定一个对象会更好。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">&lt;div v-bind:style=&quot;&#123; color: activeColor, fontSize: fontSize + &#x27;px&#x27; &#125;&quot;&gt;&lt;/div&gt;</span><br><span class="line"></span><br><span class="line">data: &#123;</span><br><span class="line">  activeColor: &#x27;red&#x27;,</span><br><span class="line">  fontSize: 30</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>对象语法常常结合返回对象的计算属性使用。</p>
<h2 id="自动添加前缀"><a href="#自动添加前缀" class="headerlink" title="自动添加前缀"></a>自动添加前缀</h2><p>当 v-bind:style 使用需要添加浏览器引擎前缀的 CSS property 时，如 transform，Vue.js 会自动侦测并添加相应的前缀。</p>
<h1 id="条件渲染"><a href="#条件渲染" class="headerlink" title="条件渲染"></a>条件渲染</h1><h2 id="v-if"><a href="#v-if" class="headerlink" title="v-if"></a>v-if</h2><h2 id="v-else"><a href="#v-else" class="headerlink" title="v-else"></a>v-else</h2><h2 id="v-else-if"><a href="#v-else-if" class="headerlink" title="v-else-if"></a>v-else-if</h2><p>v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面，否则它将不会被识别。<br>条件为true时显示，反之不显示。这些元素一般用于兄弟元素之间</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br></pre></td><td class="code"><pre><span class="line">&lt;div v-if=&quot;msg === &#x27;A&#x27;&quot;&gt;</span><br><span class="line">      A</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    &lt;div v-else-if=&quot;msg === &#x27;B&#x27;&quot;&gt;</span><br><span class="line">      B</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    &lt;div v-else-if=&quot;msg === &#x27;C&#x27;&quot;&gt;</span><br><span class="line">      C</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    &lt;div v-else&gt;</span><br><span class="line">      Not A/B/C</span><br><span class="line">    &lt;/div&gt;</span><br><span class="line">    &lt;input type=&quot;text&quot; v-model=&quot;msg&quot;&gt;</span><br></pre></td></tr></table></figure>
<h3 id="用key管理可复用的元素"><a href="#用key管理可复用的元素" class="headerlink" title="用key管理可复用的元素"></a>用key管理可复用的元素</h3><p>用key管理可复用（key是一个标记，这个标记最好是唯一的，能提高效率，判断能否复用这个标记）</p>
<h2 id="v-show"><a href="#v-show" class="headerlink" title="v-show"></a>v-show</h2><p>根据条件展示元素的选项是 v-show 指令。使用方法和v-if类似,值为true时显示，反之隐藏</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;h1 v-show=&quot;ok&quot;&gt;Hello!&lt;/h1&gt;</span><br></pre></td></tr></table></figure>
<p>v-show是通过display样式实现显示和隐藏，v-if是通过创建和删除节点来实现显示和隐藏。<br>这也就是说v-if是条件为true时才会渲染，v-show总是会被渲染。<br>所以v-show开销小，常用于频繁切换的节点。v-if则适合用于隐藏广告等。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">注意，v-show 不支持 &lt;template&gt; 元素，也不支持 v-else。</span><br></pre></td></tr></table></figure>
<h2 id="v-if-和v-for"><a href="#v-if-和v-for" class="headerlink" title="v-if 和v-for"></a>v-if 和v-for</h2><p>v-if和v-for不建议同时使用，因为v-for有更高的优先级。</p>
<h3 id="v-for与v-if一同使用"><a href="#v-for与v-if一同使用" class="headerlink" title="v-for与v-if一同使用"></a>v-for与v-if一同使用</h3><p>注意我们不推荐在同一元素上使用 v-if 和 v-for。<br>当它们处于同一节点，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。当你只想为部分项渲染节点时，这种优先级的机制会十分有用，</p>
<h1 id="列表渲染"><a href="#列表渲染" class="headerlink" title="列表渲染"></a>列表渲染</h1><h2 id="v-for的使用"><a href="#v-for的使用" class="headerlink" title="v-for的使用"></a>v-for的使用</h2><p>遍历的对象可以是数组也可以是对象，一般都要和key连用。<br>v-for 还支持一个可选的第二个参数，即当前项的索引，例如：v-for=”（item  ，index）in list”<br>下面遍历的是数组：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul &gt;</span><br><span class="line">    &lt;li v-for=&quot;item in list&quot; :key=&quot;item&quot;&gt;&#123;&#123;item&#125;&#125;&lt;/li&gt;</span><br><span class="line">&lt;/ul&gt;</span><br></pre></td></tr></table></figure>
<p>你也可以用 of 替代 in 作为分隔符，因为它更接近 JavaScript 迭代器的语法：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;div v-for=&quot;item of items&quot;&gt;&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<p>下面遍历对象：<br>value:是值，key是键，index：是索引</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;ul &gt;</span><br><span class="line">    &lt;li v-for=&quot;(value,key,index) in list&quot; :key=&quot;item&quot;&gt;&#123;&#123;key&#125;&#125;:&#123;&#123;value&#125;&#125;:&#123;&#123;index&#125;&#125;&lt;/li&gt;</span><br><span class="line">&lt;/ul&gt;</span><br></pre></td></tr></table></figure>
<p>在遍历对象时，会按 Object.keys() 的结果遍历，但是不能保证它的结果在不同的 JavaScript 引擎下都一致。</p>
<p>不要使用对象或数组之类的非基本类型值作为 v-for 的 key。请用字符串或数值类型的值。</p>
<h3 id="v-for使用一个范围值"><a href="#v-for使用一个范围值" class="headerlink" title="v-for使用一个范围值"></a>v-for使用一个范围值</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;div&gt;</span><br><span class="line">  &lt;span v-for=&quot;n in 10&quot;&gt;&#123;&#123; n &#125;&#125; &lt;/span&gt;</span><br><span class="line">&lt;/div&gt;</span><br><span class="line">//返回1~10</span><br></pre></td></tr></table></figure>
<h2 id="变更方法"><a href="#变更方法" class="headerlink" title="变更方法"></a>变更方法</h2><p>变更方法，顾名思义，会变更调用了这些方法的原始数组。<br>Vue 将被侦听的数组的变更方法进行了包裹，所以它们也将会触发视图更新。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">包括：</span><br><span class="line">push() </span><br><span class="line">pop()</span><br><span class="line">shift()</span><br><span class="line">unshift()</span><br><span class="line">splice()</span><br><span class="line">sort()</span><br><span class="line">reverse()</span><br></pre></td></tr></table></figure>
<h3 id="替换数组"><a href="#替换数组" class="headerlink" title="替换数组"></a>替换数组</h3><p>filter()、concat() 和 slice()<br>它们不会变更原始数组，而总是返回一个新数组。当使用非变更方法时，可以用新数组替换旧数组：</p>
<h1 id="例子-手动添加或删除一个节点"><a href="#例子-手动添加或删除一个节点" class="headerlink" title="例子:手动添加或删除一个节点"></a>例子:手动添加或删除一个节点</h1><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br></pre></td><td class="code"><pre><span class="line">&lt;div id=&quot;todo-list-example&quot;&gt;</span><br><span class="line">  &lt;form v-on:submit.prevent=&quot;addNewTodo&quot;&gt;</span><br><span class="line">    &lt;label for=&quot;new-todo&quot;&gt;Add a todo&lt;/label&gt;</span><br><span class="line">    &lt;input</span><br><span class="line">      v-model=&quot;newTodoText&quot;</span><br><span class="line">      id=&quot;new-todo&quot;</span><br><span class="line">      placeholder=&quot;E.g. Feed the cat&quot;</span><br><span class="line">    &gt;</span><br><span class="line">    &lt;button&gt;Add&lt;/button&gt;</span><br><span class="line">  &lt;/form&gt;</span><br><span class="line">  &lt;ul&gt;</span><br><span class="line">    &lt;li</span><br><span class="line">      is=&quot;todo-item&quot;</span><br><span class="line">      v-for=&quot;(todo, index) in todos&quot;</span><br><span class="line">      v-bind:key=&quot;todo.id&quot;</span><br><span class="line">      v-bind:title=&quot;todo.title&quot;</span><br><span class="line">      v-on:remove=&quot;todos.splice(index, 1)&quot;</span><br><span class="line">    &gt;&lt;/li&gt;</span><br><span class="line">  &lt;/ul&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><span class="line">Vue.component(&#x27;todo-item&#x27;, &#123;</span><br><span class="line">  template: &#x27;\</span><br><span class="line">    &lt;li&gt;\</span><br><span class="line">      &#123;&#123; title &#125;&#125;\</span><br><span class="line">      &lt;button v-on:click=&quot;$emit(\&#x27;remove\&#x27;)&quot;&gt;Remove&lt;/button&gt;\</span><br><span class="line">    &lt;/li&gt;\</span><br><span class="line">  &#x27;,</span><br><span class="line">  props: [&#x27;title&#x27;]</span><br><span class="line">&#125;)</span><br><span class="line"></span><br><span class="line">new Vue(&#123;</span><br><span class="line">  el: &#x27;#todo-list-example&#x27;,</span><br><span class="line">  data: &#123;</span><br><span class="line">    newTodoText: &#x27;&#x27;,</span><br><span class="line">    todos: [</span><br><span class="line">      &#123;</span><br><span class="line">        id: 1,</span><br><span class="line">        title: &#x27;Do the dishes&#x27;,</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        id: 2,</span><br><span class="line">        title: &#x27;Take out the trash&#x27;,</span><br><span class="line">      &#125;,</span><br><span class="line">      &#123;</span><br><span class="line">        id: 3,</span><br><span class="line">        title: &#x27;Mow the lawn&#x27;</span><br><span class="line">      &#125;</span><br><span class="line">    ],</span><br><span class="line">    nextTodoId: 4</span><br><span class="line">  &#125;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    addNewTodo: function () &#123;</span><br><span class="line">      this.todos.push(&#123;</span><br><span class="line">        id: this.nextTodoId++,</span><br><span class="line">        title: this.newTodoText</span><br><span class="line">      &#125;)</span><br><span class="line">      this.newTodoText = &#x27;&#x27;</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h1 id="事件处理"><a href="#事件处理" class="headerlink" title="事件处理"></a>事件处理</h1><h2 id="方法绑定，并传参"><a href="#方法绑定，并传参" class="headerlink" title="方法绑定，并传参"></a>方法绑定，并传参</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;div id=&quot;example-3&quot;&gt;</span><br><span class="line">  &lt;button v-on:click=&quot;say(&#x27;hi&#x27;)&quot;&gt;Say hi&lt;/button&gt;</span><br><span class="line">  &lt;button v-on:click=&quot;say(&#x27;what&#x27;)&quot;&gt;Say what&lt;/button&gt;</span><br><span class="line">&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">new Vue(&#123;</span><br><span class="line">  el: &#x27;#example-3&#x27;,</span><br><span class="line">  methods: &#123;</span><br><span class="line">    say: function (message) &#123;</span><br><span class="line">      alert(message)</span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>有时也需要在内联语句处理器中访问原始的 DOM 事件。可以用特殊变量 $event 把它传入方法:</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">&lt;button v-on:click=&quot;warn(&#x27;Form cannot be submitted yet.&#x27;, $event)&quot;&gt;</span><br><span class="line">  Submit</span><br><span class="line">&lt;/button&gt;</span><br></pre></td></tr></table></figure>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">// ...</span><br><span class="line">methods: &#123;</span><br><span class="line">  warn: function (message, event) &#123;</span><br><span class="line">    // 现在我们可以访问原生事件对象</span><br><span class="line">    if (event) &#123;</span><br><span class="line">      event.preventDefault()</span><br><span class="line">    &#125;</span><br><span class="line">    alert(message)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="事件修饰符"><a href="#事件修饰符" class="headerlink" title="事件修饰符"></a>事件修饰符</h2><h3 id="v-on的修饰符"><a href="#v-on的修饰符" class="headerlink" title="v-on的修饰符"></a>v-on的修饰符</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">.stop  --阻止点击事件冒泡</span><br><span class="line">.prevent  --阻止默认事件</span><br><span class="line">.capture  --在捕获阶段触发事件</span><br><span class="line">.self  --只会触发自己范围内的事件，不包含子元素</span><br><span class="line">.once  --只执行一次，如果我们在@click事件上添加.once修饰符，只要点击按钮只会执行一次。</span><br><span class="line">.passive  --是不拦截默认事件</span><br></pre></td></tr></table></figure>
<p>不要把 .passive 和 .prevent 一起使用，因为 .prevent 将会被忽略，同时浏览器可能会向你展示一个警告。请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 阻止单击事件继续传播 --&gt;</span><br><span class="line">//阻止冒泡</span><br><span class="line">&lt;a v-on:click.stop=&quot;doThis&quot;&gt;&lt;/a&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- 提交事件不再重载页面 --&gt;</span><br><span class="line">//阻止默认事件</span><br><span class="line">&lt;form v-on:submit.prevent=&quot;onSubmit&quot;&gt;&lt;/form&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- 修饰符可以串联 --&gt;</span><br><span class="line">&lt;a v-on:click.stop.prevent=&quot;doThat&quot;&gt;&lt;/a&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- 只有修饰符 --&gt;</span><br><span class="line">&lt;form v-on:submit.prevent&gt;&lt;/form&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- 添加事件监听器时使用事件捕获模式 --&gt;</span><br><span class="line">&lt;!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 --&gt;</span><br><span class="line">&lt;div v-on:click.capture=&quot;doThis&quot;&gt;...&lt;/div&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- 只当在 event.target 是当前元素自身时触发处理函数 --&gt;</span><br><span class="line">&lt;!-- 即事件不是从内部元素触发的 --&gt;</span><br><span class="line">&lt;div v-on:click.self=&quot;doThat&quot;&gt;...&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<p>使用修饰符时，顺序很重要；相应的代码会以同样的顺序产生。因此，用 v-on:click.prevent.self 会阻止所有的点击，而 v-on:click.self.prevent 只会阻止对元素自身的点击。</p>
<h2 id="按键修饰符"><a href="#按键修饰符" class="headerlink" title="按键修饰符"></a>按键修饰符</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">.enter</span><br><span class="line">.tab</span><br><span class="line">.delete(捕获“删除”和“退格”键)</span><br><span class="line">.esc</span><br><span class="line">.space</span><br><span class="line">.up</span><br><span class="line">.down</span><br><span class="line">.left</span><br><span class="line">.right</span><br></pre></td></tr></table></figure>
<p>有一些按键 (.esc 以及所有的方向键) 在 IE9 中有不同的 key 值, 如果你想支持 IE9，这些内置的别名应该是首选。<br>你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">// 可以使用 `v-on:keyup.f1`</span><br><span class="line">Vue.config.keyCodes.f1 = 112</span><br></pre></td></tr></table></figure>
<h3 id="keyup-enter"><a href="#keyup-enter" class="headerlink" title="keyup.enter"></a>keyup.enter</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` --&gt;</span><br><span class="line">&lt;input v-on:keyup.enter=&quot;submit&quot;&gt;</span><br></pre></td></tr></table></figure>
<h3 id="按键码"><a href="#按键码" class="headerlink" title="按键码"></a>按键码</h3><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">&lt;input v-on:keyup.13=&quot;submit&quot;&gt;</span><br></pre></td></tr></table></figure>
<p>keyCode 的事件用法已经被废弃了并可能不会被最新的浏览器支持。</p>
<h2 id="系统修饰键"><a href="#系统修饰键" class="headerlink" title="系统修饰键"></a>系统修饰键</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">● .ctrl</span><br><span class="line">● .alt</span><br><span class="line">● .shift</span><br><span class="line">● .meta</span><br></pre></td></tr></table></figure>
<p>注意：在 Mac 系统键盘上，meta 对应 command 键 (⌘)。在 Windows 系统键盘 meta 对应 Windows 徽标键 (⊞)。在 Sun 操作系统键盘上，meta 对应实心宝石键 (◆)。在其他特定键盘上，尤其在 MIT 和 Lisp 机器的键盘、以及其后继产品，比如 Knight 键盘、space-cadet 键盘，meta 被标记为“META”。在 Symbolics 键盘上，meta 被标记为“META”或者“Meta”。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- Alt + C --&gt;</span><br><span class="line">&lt;input v-on:keyup.alt.67=&quot;clear&quot;&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- Ctrl + Click(点击) --&gt;</span><br><span class="line">&lt;div v-on:click.ctrl=&quot;doSomething&quot;&gt;Do something&lt;/div&gt;</span><br></pre></td></tr></table></figure>
<h2 id="exact修饰符"><a href="#exact修饰符" class="headerlink" title=".exact修饰符"></a>.exact修饰符</h2><p>.exact 修饰符允许你控制由精确的系统修饰符组合触发的事件。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 即使 Alt 或 Shift 被一同按下时也会触发 --&gt;</span><br><span class="line">&lt;button v-on:click.ctrl=&quot;onClick&quot;&gt;A&lt;/button&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- 有且只有 Ctrl 被按下的时候才触发 --&gt;</span><br><span class="line">&lt;button v-on:click.ctrl.exact=&quot;onCtrlClick&quot;&gt;A&lt;/button&gt;</span><br><span class="line"></span><br><span class="line">&lt;!-- 没有任何系统修饰符被按下的时候才触发 --&gt;</span><br><span class="line">&lt;button v-on:click.exact=&quot;onClick&quot;&gt;A&lt;/button&gt;</span><br></pre></td></tr></table></figure>
<h2 id="鼠标按钮修饰符"><a href="#鼠标按钮修饰符" class="headerlink" title="鼠标按钮修饰符"></a>鼠标按钮修饰符</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">● .left</span><br><span class="line">● .right</span><br><span class="line">● .middle</span><br></pre></td></tr></table></figure>
<h1 id="表单"><a href="#表单" class="headerlink" title="表单"></a>表单</h1><p>你可以用 v-model 指令在表单 <input>、<textarea> 及 <select> 元素上创建双向数据绑定。v-model本质上就是一个语法糖。<br>v-model 会忽略所有表单元素的 value、checked、selected attribute 的初始值而总是将 Vue 实例的数据作为数据来源。你应该通过 JavaScript 在组件的 data 选项中声明初始值。</p>
<p>v-model 在内部为不同的输入元素使用不同的 property 并抛出不同的事件：<br>● text 和 textarea 元素使用 value property 和 input 事件；<br>● checkbox 和 radio 使用 checked property 和 change 事件；<br>● select 字段将 value 作为 prop 并将 change 作为事件。</p>
<p>对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 v-model 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用 input 事件。</p>
<h2 id="双向绑定"><a href="#双向绑定" class="headerlink" title="双向绑定"></a>双向绑定</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;input v-model=&quot;message&quot; placeholder=&quot;edit me&quot;&gt;</span><br><span class="line">&lt;p&gt;Message is: &#123;&#123; message &#125;&#125;&lt;/p&gt;</span><br></pre></td></tr></table></figure>
<p>在文本区域插值 (<textarea></textarea>) 并不会生效，应用 v-model 来代替(即改变他的value值)。</p>
<h2 id="复选框"><a href="#复选框" class="headerlink" title="复选框"></a>复选框</h2><p>v-model=”checked”在这里代替了checked属性</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- id属性用来匹配label标签 --&gt;</span><br><span class="line">    &lt;input type=&quot;checkbox&quot; v-model=&quot;checked&quot; id=&quot;box&quot;&gt;</span><br><span class="line">    &lt;!-- for属性用匹配input标签 --&gt;</span><br><span class="line">    &lt;label for=&quot;box&quot;&gt;&#123;&#123;checked&#125;&#125;&lt;/label&gt;</span><br></pre></td></tr></table></figure>
<h2 id="多个复选框绑定同一个数组"><a href="#多个复选框绑定同一个数组" class="headerlink" title="多个复选框绑定同一个数组"></a>多个复选框绑定同一个数组</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 当checked的值为true（选中时）时，v-model会将value的值保存到checkedNames中 --&gt;</span><br><span class="line">    &lt;input type=&quot;checkbox&quot; id=&quot;jack&quot; value=&quot;Jack&quot; v-model=&quot;checkedNames&quot;&gt;</span><br><span class="line">    &lt;label for=&quot;jack&quot;&gt;Jack&lt;/label&gt;</span><br><span class="line">    &lt;input type=&quot;checkbox&quot; id=&quot;john&quot; value=&quot;John&quot; v-model=&quot;checkedNames&quot;&gt;</span><br><span class="line">    &lt;label for=&quot;john&quot;&gt;John&lt;/label&gt;</span><br><span class="line">    &lt;input type=&quot;checkbox&quot; id=&quot;mike&quot; value=&quot;Mike&quot; v-model=&quot;checkedNames&quot;&gt;</span><br><span class="line">    &lt;label for=&quot;mike&quot;&gt;Mike&lt;/label&gt;</span><br><span class="line">    &lt;br&gt;</span><br><span class="line">    &lt;span&gt;Checked names: &#123;&#123; checkedNames &#125;&#125;&lt;/span&gt;</span><br></pre></td></tr></table></figure>
<h2 id="单选框"><a href="#单选框" class="headerlink" title="单选框"></a>单选框</h2><p>可以通过v-for动态渲染option选项</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- 当selected绑定了v-model后，会在每一次选择完毕时将选项的value值给v-model绑定的变量 --&gt;</span><br><span class="line">//再给selected标签添加一个multiple 属性后就可以多选了，通过按下ctrl键后就可以选择多个</span><br><span class="line">    &lt;select name=&quot;&quot; v-model=&quot;selected&quot; id=&quot;&quot;&gt;</span><br><span class="line">      &lt;!-- disabled选项被设置为不可选 --&gt;</span><br><span class="line">      &lt;option value=&quot;请选择&quot; disabled&gt;hh&lt;/option&gt;</span><br><span class="line">      &lt;option value=&quot;11&quot;&gt;1&lt;/option&gt;</span><br><span class="line">      &lt;option value=&quot;2&quot;&gt;2&lt;/option&gt;</span><br><span class="line">      &lt;option value=&quot;3&quot;&gt;3&lt;/option&gt;</span><br><span class="line">    &lt;/select&gt;</span><br><span class="line">    &lt;span&gt;Selected: &#123;&#123; selected &#125;&#125;&lt;/span&gt;</span><br></pre></td></tr></table></figure>
<p>如果 v-model 表达式的初始值未能匹配任何选项，<select> 元素将被渲染为“未选中”状态。在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 change 事件。因此，更推荐像上面这样提供一个值为空的禁用选项。</p>
<h2 id="单选按钮"><a href="#单选按钮" class="headerlink" title="单选按钮"></a>单选按钮</h2><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">&lt;!-- v-model绑定同一个变量时，这些单选按钮才会互斥 --&gt;</span><br><span class="line">    &lt;!-- 点选按钮被点击后，会将value的值给v-model绑定的变量 --&gt;</span><br><span class="line">    &lt;input type=&quot;radio&quot; id=&quot;one&quot; value=&quot;O阿松大ne&quot; v-model=&quot;picked&quot;&gt;</span><br><span class="line">    &lt;label for=&quot;one&quot;&gt;One&lt;/label&gt;</span><br><span class="line">    &lt;br&gt;</span><br><span class="line">    &lt;input type=&quot;radio&quot; id=&quot;two&quot; value=&quot;Two&quot; v-model=&quot;picked&quot;&gt;</span><br><span class="line">    &lt;label for=&quot;two&quot;&gt;Two&lt;/label&gt;</span><br><span class="line">    &lt;br&gt;</span><br><span class="line">    &lt;span&gt;Picked: &#123;&#123; picked &#125;&#125;&lt;/span&gt;</span><br></pre></td></tr></table></figure>
<h2 id="（v-model的）修饰符"><a href="#（v-model的）修饰符" class="headerlink" title="（v-model的）修饰符"></a>（v-model的）修饰符</h2><p>.lazy  –change 事件_之后_进行同步数据<br>.number  –自动将用户的输入值转为数值类型<br>.trim  –自动过滤用户输入的首尾空白字符</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">//实时更新span中的信息</span><br><span class="line">&lt;span&gt;&#123;&#123;msg&#125;&#125;&lt;/span&gt;</span><br><span class="line">&lt;input type=&quot;text&quot; v-model=&quot;msg&quot; name=&quot;&quot; id=&quot;&quot;&gt;</span><br><span class="line">  //当焦点不在input上时更新</span><br><span class="line">&lt;span&gt;&#123;&#123;msg&#125;&#125;&lt;/span&gt;</span><br><span class="line">&lt;input type=&quot;text&quot; v-model.lazy=&quot;msg&quot; name=&quot;&quot; id=&quot;&quot;&gt;</span><br><span class="line">  //如果用户输入的是一个数字字符串，则转换成number类型</span><br><span class="line">&lt;input v-model.number=&quot;age&quot; type=&quot;number&quot;&gt;</span><br><span class="line">  //自动去除首尾空白</span><br><span class="line">  &lt;input v-model.trim=&quot;msg&quot;&gt;</span><br></pre></td></tr></table></figure>
<h1 id="package-json中的浏览器集合browserslist"><a href="#package-json中的浏览器集合browserslist" class="headerlink" title="package.json中的浏览器集合browserslist"></a>package.json中的浏览器集合browserslist</h1><p>browserslist 目标浏览器集合 （交集） 可以在这里设置需要兼容的框架（浏览器）<br>“&gt; 1%”,   市场占有率大于1%(可自定义区间) —&gt;  数据来源于Can I use平台<br>“last 2 versions”,   浏览器的最近两个大版本（可以自定义） “last 1 version”<br>“not dead”  五年之内没有更新就是dead</p>
<p>第三方工具包 npx browserslist “last 2 versions”  运行后返回符合的浏览器版本<br>npx 是npm这个工具自带的一个命令<br>npx 运行一个包时，他会去当前目录下去查找又没有这个包，有就从当前目录下运行，没有则帮我们自动下载</p>
<h1 id="在父组件中拿到event事件对象"><a href="#在父组件中拿到event事件对象" class="headerlink" title="在父组件中拿到event事件对象"></a>在父组件中拿到event事件对象</h1><p>父子组件传参，子组件向父组件通过emit（）传参后，父组件可以在事件处理函数中直接打印event对象，如果在事件处理函数中的形参是event，那么这个event会被认为是一个变量，。</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2022/03/16/%E7%BB%83%E4%B9%A0%E6%9D%A1%E4%BB%B6%E6%B8%B2%E6%9F%93%EF%BC%8C%E5%88%97%E8%A1%A8%E6%B8%B2%E6%9F%93%EF%BC%8C%E8%A1%A8%E5%8D%95%EF%BC%8C%E8%8E%B7%E5%8F%96%E8%8A%82%E7%82%B9/" data-id="cl0utkqfk0000eww64mowh3bd" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-vue初步了解" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2022/03/15/vue%E5%88%9D%E6%AD%A5%E4%BA%86%E8%A7%A3/" class="article-date">
  <time datetime="2022-03-15T11:50:49.000Z" itemprop="datePublished">2022-03-15</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2022/03/15/vue%E5%88%9D%E6%AD%A5%E4%BA%86%E8%A7%A3/">vue初步了解</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h1 id="vue的思想"><a href="#vue的思想" class="headerlink" title="vue的思想"></a>vue的思想</h1><h2 id="mvvm模型"><a href="#mvvm模型" class="headerlink" title="mvvm模型"></a>mvvm模型</h2><p>model：数据层<br>view：html视图层<br>viewmodel：试图数据</p>
<h1 id="vue的使用方法"><a href="#vue的使用方法" class="headerlink" title="vue的使用方法"></a>vue的使用方法</h1><h2 id="vue的安装"><a href="#vue的安装" class="headerlink" title="vue的安装"></a>vue的安装</h2><p>安装脚手架</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm i -g @vue/cli</span><br></pre></td></tr></table></figure>

<h2 id="创建一个项目"><a href="#创建一个项目" class="headerlink" title="创建一个项目"></a>创建一个项目</h2><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">vue create <span class="string">&quot;项目名（不能带汉字）&quot;</span></span><br></pre></td></tr></table></figure>
<h3 id="选择创建一个v2，还是v3项目"><a href="#选择创建一个v2，还是v3项目" class="headerlink" title="选择创建一个v2，还是v3项目"></a>选择创建一个v2，还是v3项目</h3><p><img src="/images/9.png" alt="img"></p>
<h2 id="查看readme-md文件"><a href="#查看readme-md文件" class="headerlink" title="查看readme.md文件"></a>查看readme.md文件</h2><h1 id="项目运行后有波浪线-警告"><a href="#项目运行后有波浪线-警告" class="headerlink" title="项目运行后有波浪线(警告)"></a>项目运行后有波浪线(警告)</h1><p>解决办法：<br>在package.json文件中,找到parserOptions，并添加”requireConfigFile” : false</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">&quot;parserOptions&quot;: &#123;</span><br><span class="line">  &quot;parser&quot;: &quot;@babel/eslint-parser&quot;,</span><br><span class="line">  &quot;requireConfigFile&quot; : false</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h1 id="vue语法"><a href="#vue语法" class="headerlink" title="vue语法"></a>vue语法</h1><p><img src="/images/10.png" alt="img"><br>通过render方法渲染App.vue文件，生成一个对象节点（虚拟DOM）。<br>再通过$mount ，将对象挂在到App的#app上</p>
<p>创建一个新的组件，可以通过输入： vue关键字，快捷生成vue模板 </p>
<h2 id="data"><a href="#data" class="headerlink" title="data() {}"></a>data() {}</h2><p>data 函数用于存放变量，且必须返回一个对象<br><img src="/images/12.png" alt="img"></p>
<h3 id="使用数据，变量"><a href="#使用数据，变量" class="headerlink" title="使用数据，变量"></a>使用数据，变量</h3><p>mustache语法,<br>可以动态的获取数据的内容（声明式渲染）<br><img src="/images/13.png" alt="img"></p>
<h1 id="组件之间的引用"><a href="#组件之间的引用" class="headerlink" title="组件之间的引用"></a>组件之间的引用</h1><p>先将需要的文件引入，在注册（（引用）在 export default 中）,注册后就可以将该文件名当标签使用<br><img src="/images/11.png" alt="img"></p>
<h1 id="点击事件"><a href="#点击事件" class="headerlink" title="点击事件"></a>点击事件</h1><p>@click = ‘事件处理函数’ 绑定一个点击事件<br>@  是绑定事件（v-on：）的语法糖<br><img src="/images/14.png" alt="img"></p>
<h2 id="事件处理函数，写在methods中"><a href="#事件处理函数，写在methods中" class="headerlink" title="事件处理函数，写在methods中"></a>事件处理函数，写在methods中</h2><p>methods中不能使用箭头函数<br><img src="/images/15.png" alt="img"></p>
<h2 id="通过点击事件修改数据"><a href="#通过点击事件修改数据" class="headerlink" title="通过点击事件修改数据"></a>通过点击事件修改数据</h2><p>通过this关键字指向data，获取数据<br>this.$data ，获取data函数对象<br>data 是 Observer响应式（响应类型）<br>this 指向当前组件实例（可获取data中的属性，方法）</p>
<p><img src="/images/16.png" alt="img"></p>
<h1 id="绑定属性"><a href="#绑定属性" class="headerlink" title="绑定属性"></a>绑定属性</h1><h2 id="v-bind"><a href="#v-bind" class="headerlink" title="v-bind:"></a>v-bind:</h2><p>通过v-bind: 绑定<br>绑定后的属性，就可以使用变量，如下：<br>str2就是变量，而不是字符串了<br><img src="/images/17.png" alt="img"></p>
<h2 id="条件判断"><a href="#条件判断" class="headerlink" title="条件判断"></a>条件判断</h2><h3 id="v-if-“”"><a href="#v-if-“”" class="headerlink" title="v-if = “”"></a>v-if = “”</h3><p>性能消耗高，适合用在广告关闭<br>v-if 可以删除一个节点（v-if = “false”），反之生成（显示）<br><img src="/images/18.png" alt="img"></p>
<h3 id="v-show-“”"><a href="#v-show-“”" class="headerlink" title="v-show = “”"></a>v-show = “”</h3><p>显示或隐藏节点（不是删除），性能消耗低<br>v-show的用法和v-if一样</p>
<h3 id="v-for-“item-in-items”"><a href="#v-for-“item-in-items”" class="headerlink" title="v-for = “item in items”"></a>v-for = “item in items”</h3><p>使用v-for 时要加以一个 :key = “item”  ， 否则会有警告（eslint给的警告）</p>
<p>template中只能放一个标签<br>:key中的值只能是v-for中已经声明的变量<br>数组和对象的遍历方式一样</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br></pre></td><td class="code"><pre><span class="line">&lt;template&gt;</span><br><span class="line">&lt;!-- template中只能放一个标签 --&gt;</span><br><span class="line">  &lt;div id=&quot;app&quot;&gt;</span><br><span class="line">    &lt;img alt=&quot;Vue logo&quot; src=&quot;./assets/logo.png&quot;&gt;</span><br><span class="line">    &lt;demoD&gt;&lt;/demoD&gt;</span><br><span class="line">    &lt;div&gt;&#123;&#123;list&#125;&#125;&lt;/div&gt;</span><br><span class="line">    &lt;div&gt;&#123;&#123;user&#125;&#125;&lt;/div&gt;</span><br><span class="line">    &lt;ul&gt;</span><br><span class="line">      &lt;!-- :key中的值只能是v-for中已经声明的变量 --&gt;</span><br><span class="line">      &lt;!-- 数组和对象的遍历方式一样 --&gt;</span><br><span class="line">      &lt;li v-for=&quot;(item,index) in list&quot; :key=&quot;index&quot;&gt;</span><br><span class="line">        &#123;&#123;item&#125;&#125;</span><br><span class="line">      &lt;/li&gt;</span><br><span class="line">      &lt;li v-for=&quot;(item) in user&quot; :key=&quot;item&quot;&gt;</span><br><span class="line">        &#123;&#123;item&#125;&#125;</span><br><span class="line">      &lt;/li&gt;</span><br><span class="line">    &lt;/ul&gt;</span><br><span class="line">  &lt;/div&gt;</span><br><span class="line">&lt;/template&gt;</span><br><span class="line"></span><br><span class="line">&lt;script&gt;</span><br><span class="line">//引用一个组件</span><br><span class="line">import demoD from &#x27;./components/demo-d.vue&#x27;</span><br><span class="line"></span><br><span class="line">export default &#123;</span><br><span class="line">  //name: &#x27;App&#x27;,</span><br><span class="line">  //注册一个组件</span><br><span class="line">  components: &#123;</span><br><span class="line">    demoD</span><br><span class="line">  &#125;,</span><br><span class="line">  // 数据</span><br><span class="line">  data() &#123;</span><br><span class="line">    return &#123;</span><br><span class="line">      list:[1,2,3,4,5],</span><br><span class="line">      user:&#123;</span><br><span class="line">        infos:&#x27;你个傻挂&#x27;,</span><br><span class="line">        email:&#x27;nigeshabi@qq.com&#x27;,</span><br><span class="line">        uname:&#x27;阿呆&#x27;,</span><br><span class="line">        sex:&#x27;男&#x27;,</span><br><span class="line">        age:&#x27;17&#x27;</span><br><span class="line">      &#125;,</span><br><span class="line">      isShow:true,</span><br><span class="line"></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;,</span><br><span class="line">  // 事件处理函数</span><br><span class="line">  methods:&#123;</span><br><span class="line">    </span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line">&lt;/script&gt;</span><br><span class="line"></span><br><span class="line">&lt;style&gt;</span><br><span class="line">&lt;/style&gt;</span><br><span class="line"></span><br></pre></td></tr></table></figure>
<h1 id="双向绑定"><a href="#双向绑定" class="headerlink" title="双向绑定"></a>双向绑定</h1><h2 id="v-model"><a href="#v-model" class="headerlink" title="v-model"></a>v-model</h2><p>输入框中信息改变时，div中的信息也会改变，这是因为message保存的信息改变了，而div使用mustarche语法引用了message。</p>
<figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">&lt;div class=&quot;cla&quot;&gt;&#123;&#123;message&#125;&#125;&lt;/div&gt;</span><br><span class="line">&lt;input type=&quot;text&quot; v-model=&quot;message&quot;&gt;</span><br></pre></td></tr></table></figure>
      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2022/03/15/vue%E5%88%9D%E6%AD%A5%E4%BA%86%E8%A7%A3/" data-id="cl0s4e2fk000098w67aaa5veq" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-git基础命令应用" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2022/03/14/git%E5%9F%BA%E7%A1%80%E5%91%BD%E4%BB%A4%E5%BA%94%E7%94%A8/" class="article-date">
  <time datetime="2022-03-14T11:49:12.000Z" itemprop="datePublished">2022-03-14</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2022/03/14/git%E5%9F%BA%E7%A1%80%E5%91%BD%E4%BB%A4%E5%BA%94%E7%94%A8/">git基础命令应用</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <h1 id="git-命令"><a href="#git-命令" class="headerlink" title="git 命令"></a>git 命令</h1><h2 id="ls"><a href="#ls" class="headerlink" title="ls"></a>ls</h2><p>查看当前的文件的内容列表</p>
<p><img src="/images/1.png" alt="img"></p>
<h2 id="pwd"><a href="#pwd" class="headerlink" title="pwd"></a>pwd</h2><p>查看当前文件或者文件夹的系统路径</p>
<p><img src="/images/2.png" alt="img"></p>
<h2 id="cd-XXX（目录名称-或者-文件夹名称）"><a href="#cd-XXX（目录名称-或者-文件夹名称）" class="headerlink" title="cd XXX（目录名称 或者 文件夹名称）"></a>cd XXX（目录名称 或者 文件夹名称）</h2><p>进入某个目录或者某个文件夹</p>
<p><img src="/images/3.png" alt="img"></p>
<h2 id="cd"><a href="#cd" class="headerlink" title="cd.."></a>cd..</h2><p> 返回上一级</p>
<h2 id="cd-1"><a href="#cd-1" class="headerlink" title="cd../.."></a>cd../..</h2><p>返回上一级的上一级</p>
<h2 id="cd-2"><a href="#cd-2" class="headerlink" title="cd /"></a>cd /</h2><p>返回根路径</p>
<h2 id="cd-盘符"><a href="#cd-盘符" class="headerlink" title="cd (盘符):"></a>cd (盘符):</h2><p>切换盘符</p>
<p><img src="/images/4.png" alt="img"></p>
<h2 id="mkdir-xxx"><a href="#mkdir-xxx" class="headerlink" title="mkdir xxx"></a>mkdir xxx</h2><p>（在当前目录下）创建一个文件夹</p>
<p><img src="/images/5.png" alt="img"></p>
<h2 id="touch-xxx"><a href="#touch-xxx" class="headerlink" title="touch  xxx"></a>touch  xxx</h2><p> （在当前目录下） 创建一个文件</p>
<p><img src="/images/6.png" alt="img"></p>
<h2 id="rm-xxx"><a href="#rm-xxx" class="headerlink" title="rm xxx"></a>rm xxx</h2><p>删除一个文件</p>
<h2 id="rm-xxx-rf"><a href="#rm-xxx-rf" class="headerlink" title="rm xxx -rf"></a>rm xxx -rf</h2><p>强制删除，可以用来删除文件夹</p>
<h2 id="cat-xxx"><a href="#cat-xxx" class="headerlink" title="cat xxx"></a>cat xxx</h2><p>查看文件内容</p>
<p><img src="/images/7.png" alt="img"></p>
<h2 id="clear"><a href="#clear" class="headerlink" title="clear"></a>clear</h2><p>清空当前命令行窗口</p>
<h2 id="code"><a href="#code" class="headerlink" title="code ."></a>code .</h2><p>启动vsCode编辑器 并打开当前目录</p>
<h1 id="git命令，操作仓库"><a href="#git命令，操作仓库" class="headerlink" title="git命令，操作仓库"></a>git命令，操作仓库</h1><h2 id="提交流程"><a href="#提交流程" class="headerlink" title="提交流程"></a>提交流程</h2><p><img src="/images/8.png" alt="img"></p>
<p>1.git clone ‘仓库地址’ ，</p>
<p>2.进入项目目录。</p>
<p>3.克隆后不要直接在master分支中写代码，要先创建一个新的分支，</p>
<p>4.然后切换到这个新的分支（dev），通过git merage master将master分支中的代码复制（合并）到dev中，代码的修改，写入都在这个分支中进行，</p>
<p>5.修改完成后，再切换到master分支中，合并dev的代码，</p>
<p>6.然后在拉去最新代码（git pull  防止当前代码与仓库代码不一致），</p>
<p>7.最后通过 git push远程推送(提交代码到仓库)</p>
<p>注：只要是修改代码等，就在分支中进行，提交则在master中进行</p>
<h2 id="git-clone-‘仓库地址’"><a href="#git-clone-‘仓库地址’" class="headerlink" title="git clone ‘仓库地址’"></a>git clone ‘仓库地址’</h2><p>克隆仓库</p>
<h2 id="git-add"><a href="#git-add" class="headerlink" title="git add ."></a>git add .</h2><p>全部添加到暂存区</p>
<h2 id="git-add-‘要添加的文件名’"><a href="#git-add-‘要添加的文件名’" class="headerlink" title="git add ‘要添加的文件名’"></a>git add ‘要添加的文件名’</h2><p>添加一个文件到暂存区</p>
<h2 id="git-commit-m-“信息”"><a href="#git-commit-m-“信息”" class="headerlink" title="git commit -m “信息”"></a>git commit -m “信息”</h2><p>新建一个版本号</p>
<h2 id="git-pull"><a href="#git-pull" class="headerlink" title="git pull"></a>git pull</h2><p>拉取最新代码（更新）</p>
<h2 id="git-push"><a href="#git-push" class="headerlink" title="git push"></a>git push</h2><p>远程推送 （将修改后的代码，还有相应的版本号和git操作记录，发送给仓库）</p>
<h2 id="创建分支"><a href="#创建分支" class="headerlink" title="创建分支"></a>创建分支</h2><h2 id="git-btanch"><a href="#git-btanch" class="headerlink" title="git btanch"></a>git btanch</h2><p>查看当前分支，有哪些，使用的时哪一个</p>
<h2 id="git-branch-xxx"><a href="#git-branch-xxx" class="headerlink" title="git branch xxx"></a>git branch xxx</h2><p>新建分支</p>
<h2 id="git-checkout-xxx"><a href="#git-checkout-xxx" class="headerlink" title="git checkout xxx"></a>git checkout xxx</h2><p> 切换到某个分支</p>
<h2 id="git-merge-‘要合并的分支’"><a href="#git-merge-‘要合并的分支’" class="headerlink" title="git merge ‘要合并的分支’"></a>git merge ‘要合并的分支’</h2><p>合并代码</p>
<h2 id="git-status"><a href="#git-status" class="headerlink" title="git status"></a>git status</h2><p>查看当前分支状态</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2022/03/14/git%E5%9F%BA%E7%A1%80%E5%91%BD%E4%BB%A4%E5%BA%94%E7%94%A8/" data-id="cl0qnthih0000jcw66ykva1f9" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  
    <article id="post-hello-world" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2022/03/14/hello-world/" class="article-date">
  <time datetime="2022-03-14T11:47:58.078Z" itemprop="datePublished">2022-03-14</time>
</a>
    
  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2022/03/14/hello-world/">Hello World</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <p>Welcome to <a target="_blank" rel="noopener" href="https://hexo.io/">Hexo</a>! This is your very first post. Check <a target="_blank" rel="noopener" href="https://hexo.io/docs/">documentation</a> for more info. If you get any problems when using Hexo, you can find the answer in <a target="_blank" rel="noopener" href="https://hexo.io/docs/troubleshooting.html">troubleshooting</a> or you can ask me on <a target="_blank" rel="noopener" href="https://github.com/hexojs/hexo/issues">GitHub</a>.</p>
<h2 id="Quick-Start"><a href="#Quick-Start" class="headerlink" title="Quick Start"></a>Quick Start</h2><h3 id="Create-a-new-post"><a href="#Create-a-new-post" class="headerlink" title="Create a new post"></a>Create a new post</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new <span class="string">&quot;My New Post&quot;</span></span><br></pre></td></tr></table></figure>

<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/writing.html">Writing</a></p>
<h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo server</span><br></pre></td></tr></table></figure>

<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/server.html">Server</a></p>
<h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo generate</span><br></pre></td></tr></table></figure>

<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/generating.html">Generating</a></p>
<h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure>

<p>More info: <a target="_blank" rel="noopener" href="https://hexo.io/docs/one-command-deployment.html">Deployment</a></p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://example.com/2022/03/14/hello-world/" data-id="cl0qnthir0001jcw66gxr753a" class="article-share-link">Share</a>
      
      
    </footer>
  </div>
  
</article>


  


</section>
        
          <aside id="sidebar">
  
    

  
    

  
    
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2022/03/">March 2022</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2022/03/23/vuex%E5%AD%A6%E4%B9%A0/">vuex学习</a>
          </li>
        
          <li>
            <a href="/2022/03/22/vuew-router%E7%9A%84%E5%9F%BA%E6%9C%AC%E4%BD%BF%E7%94%A8/">vuew-router的基本使用</a>
          </li>
        
          <li>
            <a href="/2022/03/22/vue-router%E7%9A%84%E5%88%9B%E5%BB%BA%E8%BF%87%E7%A8%8B/">vue-router的创建过程</a>
          </li>
        
          <li>
            <a href="/2022/03/20/axios%E5%AD%A6%E4%B9%A0/">axios学习</a>
          </li>
        
          <li>
            <a href="/2022/03/16/%E4%BA%86%E8%A7%A3vue%E7%BB%84%E4%BB%B6/">了解vue组件</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2022 诶无痕和诶有痕<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css">

  
<script src="/fancybox/jquery.fancybox.pack.js"></script>




<script src="/js/script.js"></script>




  </div>
</body>
</html>